1

テーブルの列の残りのスペースをどのように広げますか? 次の列を持つテーブルが必要なように：

  • id: 空白をたくさん入れたくないので、できるだけ小さい (幅) にする必要があります
  • タイトル: できるだけ多くのスペースを取る必要があります
  • content: できるだけ多くのスペースを取る必要があります
  • アクション: (編集、削除) はできるだけ小さくする必要があります

ここに私がやりたいことの足場があります:

| <--------------------------------- MAX WIDTH ---------------------------------> |

| id |            title            |            content            |    action    | < this is what i want
+----+-----------------------------+-------------------------------+--------------+
| 23 | test1                       | 123080asdu0a                  | edit  delete |
| 32 | test2                       | 123080asdu0a                  | edit  delete |
...

残りのスペース (100% - ID の幅 - アクションの幅を 2 ​​で割った値) をタイトルとコンテンツの両方の列に配置するにはどうすればよいですか?

4

1 に答える 1

1

小さな列widthを に設定します1px(0動作しません)。コンテンツはこれを引き伸ばしますが、可能な限り小さくします。

大きな列widthを に設定します50%。これにより、同じ幅になります (一方のテキストが他方よりも多く、より多くのスペースが必要な場合を除きます)。

「編集」と「削除」を同じ行に保持するには、単語の折り返しを防ぐコンテナdivまたはspanセットを使用します。white-space: nowrap

私はフィドルを作りました: http://jsfiddle.net/RSsNS/

HTML :

<table>
    <tr>
        <td class="small">ID</td>
        <td class="big">Title</td>
        <td class="big">Content</td>
        <td class="small">Action</td>
    </tr>
    <tr>
        <td class="small">23</td>
        <td class="big">Test 1</td>
        <td class="big">123080asdu0a</td>
        <td class="small">
            <div>
                edit delete
            </div>
        </td>
    </tr>
    <tr>
        <td class="small">32</td>
        <td class="big">Test 2</td>
        <td class="big">123080asdu0a</td>
        <td class="small">
            <div>
                edit delete
            </div>
        </td>
    </tr>
</table>

CSS :

table {
    width: 400px;
    border: 1px dashed #AAA;
}
td {
    border: 1px solid #CCC;
}
.small {
    width: 1px;
}
.big {
    width: 50%;
}
td > div {
    white-space: nowrap;
}
于 2013-03-29T22:02:05.107 に答える