javascript - 设置表格的样式，其中某些列的宽度最小

Question

如何设置这样的表格样式，其中列包含 <和 >只占用必要的宽度。其他列每个单元格包含一个句子。一行的高度应允许显示所有句子，而不会占用不必要的高度。三个句子栏的宽度应相等，表格的宽度应填满浏览器窗口。

|-------------------------------------------------------------|
| |-------------|---|---|-------------|---|---|-------------| | 
| | 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.   |   |   |             |   |   |             | |
| |-------------|---|---|-------------|---|---|-------------| |    

解决方案可能涉及 javascript 和 jquery。

Answer 1

使宽列的总宽度接近 100%。像这样。

    <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>