EN
How to create table with same width / size of columns in html and css?
1
answers
4
points
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
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