Languages

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

4 points
Asked by:
Greg
5140

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 answer
3 points
Answered by:
Greg
5140

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
Native Advertising
50 000 ad impressions - 449$
­čÜÇ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join