Languages

How to create table with same width / size of columns in html and css?

4 points
Asked by:
Greg
1505

I try to create table that has same width of each column (I am looking for CSS solution) - even content is too big, beacuse will be cut and replaced with dots (...) with styles.

This is my table:

I know there is posible to set fixed width or with percents, but width of table and number of colums can be different.

Code:

// ONLINE-RUNNER:browser;

<style>

  table {
      width: 100%;
  }
  
  td {
      border: 1px solid red;
      width: auto;
  }

</style>
<table>
	<tbody>
		<tr>
			<td>zzzzzzzz</td>
			<td>bbbbbbbb</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>cccccccc</td>
			<td>dddddddd</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>eeeeeeee</td>
			<td>oooooooo</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
1 answers
3 points
Answered by:
Greg
1505

table-layout: fixed; style property for table element solvers yours problem.

Example:

// ONLINE-RUNNER:browser;

<style>

  table {
      width: 100%;
      table-layout: fixed;
  }
  
  td {
      border: 1px solid red;
      width: auto;
  }

</style>
<table>
	<tbody>
		<tr>
			<td>zzzzzzzz</td>
			<td>bbbbbbbb</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>cccccccc</td>
			<td>dddddddd</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>eeeeeeee</td>
			<td>oooooooo</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
0 comments Add comment

Checkout latest findings & news:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Rockstar community members
Thank you for great work 👍