I have a table with three <td> cells.
- The first
<td>'s width should adjust to its content. - The second
<td>'s width is fixed. - The third
<td>should fill the remaining space.
Note1: My website is responsive, so the width of the third <td> needs to change based on the screen size.
Note2: To prevent content overflow in the third <td>, I must use table-layout: fixed; and width: 100%; for the table. Additionally, I need to apply word-wrap: break-word; to the <td>'s. It's important to note that word-break: break-all; should not be used as it breaks words in the middle of the cell.
This is my implementation:
HTML:
<div class="container">
<table>
<tr>
<td class="variable-width">depends on content</td>
<td class="fixed-width">always fixed</td>
<td class="fill-space">fills remaining space</td>
</tr>
</table>
</div>
CSS:
.container{
width: 60%;
}
table{
table-layout: fixed;
width: 100%;
}
td{
word-wrap: break-word;
vertical-align: top;
}
.variable-width{
width: auto;
}
.fixed-width{
width: 10px;
}
.fill-space{
width: 98%;
}
View the code in action on this fiddle.
Desired outcomes:
Example 1:
+-+---+------------------------------------------+
|4|fix|this is a test...! |
+-+---+------------------------------------------+
Example 2:
+----+---+--------------------------------------+
|2 |fix|this is a test...! |
+----+---+--------------------------------------+
| |fix|no first TD here |
+----+---+--------------------------------------+
|1234|fix|no first TD here |
+----+---+--------------------------------------+
Example 3:
+---+---+-----------------------------+
|123|fix|adjustable vote up width |
| | |with word wrap |
+---+---+-----------------------------+
Example 4:
+---+---+-------------------------------------------------------+
|123|fix|Integrated testttttttttttttttttttttttttttttttttttttttttttt|
| | |ttttttttttttttttttttttttttttttttttttttttttttttttttttttt |
| | |tttttttttttttttttttttttttttttttttttttttt |
+---+---+-------------------------------------------------------+
Example 5:
+---+---------------------------------------------------------+
|fix|remove variable-width cell if missing |
+---+---------------------------------------------------------+
|fix|remove variable-width cell if missing |
+---+---------------------------------------------------------+
Is JavaScript necessary to achieve this functionality?