I have the following layout.
<style>
table { width: 200px; white-space: nowrap; table-layout: fixed; }
.a { width:10px; overflow: hidden; text-overflow: ellipsis }
.b { width:190px; overflow: hidden; text-overflow: ellipsis }
</style>
<table border="1" style="">
<tr>
<td colspan="2">Some content header goes in here</td>
</tr>
<tr>
<td class="a">This cells has more content</td>
<td class="b">Less content here</td>
</tr>
</table>
I'm trying to set a fixed table layout and have a fixed width on each column, however, since I have colspan
above the fixed columns, then I'm not able to set the width. How can I achieve this?
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.
TableLayout is a ViewGroup that displays child View elements in rows and columns. Note: For better performance and tooling support, you should instead build your layout with ConstraintLayout. TableLayout positions its children into rows and columns.
You could add a couple of col
tags after the opening <table>
tag and set the width on those:
<style>
table { width: 200px; white-space: nowrap; table-layout: fixed; }
.a { overflow: hidden; text-overflow: ellipsis }
.b { overflow: hidden; text-overflow: ellipsis }
.cola { width: 10px; }
.colb { width: 190px; }
</style>
<table border="1" style="">
<col class="cola" />
<col class="colb" />
<tr>
<td colspan="2">Some content header goes in here</td>
</tr>
<tr>
<td class="a">This cells has more content</td>
<td class="b">Less content here</td>
</tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With