web-dev-qa-db-ja.com

表のセル幅を調整する

4つのテーブル列-ID、Text、Date、Actionを取ります。私の場合、テーブルの幅は常に一定です-例では960px。

次のようなテーブルを作成するにはどうすればよいですか？

*-*------------------------------------*----------*----*
|1| Some text...                       |May 2011  |Edit|
*-*------------------------------------*----------*----*
|2| Another text...                    |April 2011|Edit|
*-*------------------------------------*----------*----*

ご覧のとおり、ID、Date、Actionはコンテンツに合わせて幅を調整します。Textは可能な限り長くします。..

列の特定の幅を設定せずにそれは可能ですか？ ID = 123またはDate = 2011年11月の場合、列は自動的に広くなります...

htmlcsscss-tables
11
Mr Sooul

ワイドtdで100%幅を使用し、white-space:nowrapと共にテーブルの固定幅を使用すると、次のようになります。

デモ

HTML

<table>
    <tr>
        <td>1</td>
        <td width="100%">Some text... </td>
        <td>May 2011</td>
        <td>Edit</td>
    </tr>
    <tr>
        <td>2</td>
        <td width="100%">Another text... </td>
        <td>April 2011</td>
        <td>Edit</td>
    </tr>
</table>


CSS

table
{
    ...
    width:960px;
}

td
{
    ...
    white-space:nowrap;
}
18
Joseph Marikle

基本的には次のようになります。 http://jsfiddle.net/49W5A/ -セル幅を小さくするには（1pxなど）、セル幅を小さくする必要がありますできるだけ。

しかし、後でわかるように、日付フィールドが行を折り返すことに問題があります。これを防ぐには、テキストフィールドにwhite-space: nowrap;を追加します。 http://jsfiddle.net/ZXu7U/

作業例：

<style type="text/css">
.table{
    width:500px;
    border: 1px solid #ccc;
}
.table td{
    border: 1px solid #ccc;
}
.id, .date, .action{
    width:1px;
}
.date{
    white-space: nowrap;
}
</style>
<table class="table">
    <tr>
        <td class="id">1</td>
        <td class="text">Some Text...</td>
        <td class="date">May 2011</td>
        <td class="action">Edit</td>
    </tr>
    <tr>
        <td class="id">2</td>
        <td class="text">Another Text...</td>
        <td class="date">April 2011</td>
        <td class="action">Edit</td>
    </tr>
</table>
5
oezi

私への私の最高のアドバイスは、テーブルの幅に触れないことです。テーブルは、すべてのセルが最適になるように自動的にレイアウトされます。

ただし、プッシュスルーする場合は、調整が必要なセルでwidth: 1px;を使用します（各列の1つで十分です）。また、すべてのセルでwhite-space: nowrapを使用します。これにより、行が分割されなくなります。

4
Madara's Ghost

これを試して：

.id、.date、.actionはテーブルセル（td）です。

CSS：

.id, .date, .action {
   width: 1em;
}

それは私のために働いた。

Width：1emはテキストをカットしませんが、幅のサイズを最小にします。

2
robcaa

テーブルの列幅を設定するために見つけた最良の方法は、 テーブルヘッド （これは空にすることができます）そして、各テーブルヘッドセルに相対的な幅を適用します。テーブル本体のすべてのセルの幅は、列見出しの幅に一致します。例：

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

結果を表示

あるいは、提案されているようにcolgroupを使用できます here 。

1
eicksl