Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling a table layout fixed & fixed width columns + colspan

Tags:

css

html-table

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?

like image 744
Kayla Avatar asked May 23 '12 02:05

Kayla


People also ask

How do you fix a fixed width table?

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.

How do I keep my table size fixed in HTML?

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.

What is a table-layout?

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.


1 Answers

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>
like image 90
Jonathan S. Avatar answered Oct 02 '22 10:10

Jonathan S.