CODEWITHSUNDEEP
javascriptjquerycsshtml
Baz
Baz

Reputation: 13123

Style a table where some columns have minimal width

How do I style a table like this where the columns containing < and > only take up as much width as necessary. The other columns contain a single sentence per cell. The height of a row should allow all sentences to be displayed without taking more height than necessary. The three sentence columns should be of equal width and the width of the table should fill the browser window.

|-------------------------------------------------------------|
| |-------------|---|---|-------------|---|---|-------------| | 
| | Txt txt txt |   |   | Short sent. |   |   |  A little   | |
| | txt txt txt | > | < |             | > | < |  lngr sent. | |
| | end.        |   |   |             |   |   |             | |
| |-------------|---|---|-------------|---|---|-------------| |
| | Nxt sentnce |   |   | A short     |   |   |  A little   | |
| | txt txt end | > | < | sent.       | > | < |  lngr sent. | |
| |-------------|---|---|-------------|---|---|-------------| |
| | Text text   |   |   | Another     |   |   |  Short      | |
| | text text   |   |   | short sent. |   |   |  sentence.  | |
| | txt txt txt | > | < |             | > | < |             | |
| | txt text.   |   |   |             |   |   |             | |
| |-------------|---|---|-------------|---|---|-------------| |

The solution can involve javascript and jquery.

Upvotes: 0

Views: 30

Answers (1)

Alex Kudryashev
Alex Kudryashev

Reputation: 9460

Make wide columns total width close to 100%. Something like this.

    <table style="width:100%;border:solid 1px">
        <tr>
            <td style="width:33%;border:solid 1px">lorem ipsum lorem ipsum</td>
            <td style="border:solid 1px">></td>
            <td style="border:solid 1px"><</td>
            <td style="width:33%;border:solid 1px">lorem ipsum</td>
            <td style="border:solid 1px">></td>
            <td style="border:solid 1px"><</td>
            <td style="width:33%;border:solid 1px">lorem ipsum lorem ipsum</td>
        </tr>
    </table>

Upvotes: 1

Related Questions