4

動的コンテンツを含むテーブルがあるため、各行の高さは変化します。必要なのは、コンテンツに関係なくテーブルの高さを固定することです。コンテンツは任意の長さにすることができ、画像を含めることもできます。

CSSで次のことを試しました。

table {
  border-collapse: collapse;
}
table td {
  border: 1px solid #ccc;
  padding: 4px;
}
table td:nth-child(2n+2) {
  width: 200px;
}
table td:last-child {
  width: 100px;
}
table tr {
  height: 80px;
  display: block;
  overflow: auto;
  background-color: red;
  border: 2px solid #ccc;
}

<table>
  <tr>
    <td>content1</td>
    <td>content 2</td>
    <td>content 3</td>
  </tr>
  <tr>
    <td>content1</td>
    <td>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</td>
    <td></td>
  </tr>
  <tr>
    <td>content1</td>
    <td></td>
    <td>content 3</td>
  </tr>
</table>

正常に機能しましたが、どのセルにもコンテンツがない場合、またはコンテンツによってセルが減少すると、セルが折りたたまれます。これがフィドルです

4

1 に答える 1

1

次のようなものを使用できます（例）：

table td
{
    width: 60px;
    height: 60px;
    display: inline-block;
    overflow: auto;
}​

をサポートするブラウザを使用しますinline-block。（また、これが良い解決策であるかどうかはわかりません。）

于 2012-06-11T14:33:08.967 に答える