1

2 つの列を持つ非常に単純なテーブルがあり、そのテーブルに含まれるコンテンツに関係なく、そのテーブルをページの幅全体に広げたい (テキストがほとんど含まれていない、それが問題です):

<div>
  <table>
    <tr>
      <th>Title</th>
      <td>Some text</td>
    </tr>
  </table>
</div>

問題は、これが Firefox で動作しないことです (私はまだ Internet Explorer を試してみませんでした)。

これはCSSです：

div {
  max-width: 640px;
  float: left;
}

table {
  width: 100%;
}

table th,
table td {
  width: 100%; /* looks strange, but gives both columns equal length in Safari */
}

ここで何が欠けているのか誰か教えてもらえますか?

助けてくれてありがとう...

4

3 に答える 3

2

幅thをtd100% ではなく 50% にする -デモ

html, body {
    margin: 0;
    padding: 0;
}

table {   
    width: 100%;
    padding: 0;
}

table th, table td {   
    width: 50%;
    border: 1px solid red;
}
于 2012-12-04T17:07:42.753 に答える
1

cssを次のように変更するだけです

table th,
table td {
  width: 50%;
}

現時点での問題は、テーブル内の各セルがテーブルの幅の 100% になろうとしているということです。

例を参照してください

于 2012-12-04T17:09:08.163 に答える
0

td100% から 50% に変更することは正しいborder-collapseですが、セルに境界線を使用しているため、表にも追加する必要があります。

width:80%うまく動作します-明示的なpx幅は必要ありません（少なくともFF、Chromeではありません）

http://jsfiddle.net/UdbRQ/

于 2012-12-04T18:16:30.207 に答える