1

標準の HTML テーブル タグで表示する一連の表形式のデータがあります。この設計では、各行の間に 1 ピクセルの分離線が必要であり、特定の行のすべてのセルが互いに垂直方向の中央に配置されている必要があります。さまざまな行とセルは任意の高さを持つことができ、それらの内部のコンテンツに基づいて拡張する必要があります。

ここで注意が必要な点は、1 ピクセルの区切り線が、テーブルの端の両側から 15 ピクセルで停止するはずであるという事実から来ています。これを解決する私の最初の傾向は、単にborder-bottommy<tr>または<td>タグに a を追加することですが、私の人生では、線が完全に横切られないようにする方法を見つけることができませんでした. <div>タグの内側にタグを配置<td>すると、そこに境界線を適用できますが、境界線の下部は、行の下部ではなく、コンテンツの下部にぴったり合っています。

私が仕事をすることができた唯一のものは、私にとって本当に「汚い」と感じます.

<table>
  <tr>
    <td style="width: 15px;">&nbsp;</td>
    <td style="border-bottom: 1px solid gray;">My table data</td>
    .... more cells here as needed
    <td style="width: 15px;">&nbsp;</td>
  </tr>
</table>

行の両端にこれら 2 つのスペーサー セルを追加するため、これが機能します。私はいくつかのテーブル以外のソリューションをかなり下まで進めましたが、コンテンツを正しく成長させようとする（つまり、さまざまな行に絶対的な配置がない）、および/または物事を垂直方向に中央に配置してそれらのように折り返すという問題に常に遭遇しますすることになっています。

誰もがより良いアイデアを持っていますか? それが助けになるなら、モバイルを含むIE9 +などの「新しい」ブラウザのみをサポートしています。

4

1 に答える 1

2

colspan="n" を使用して、各ペアまたは行の間に新しい行を追加してみることができます。ここで、n は列の総数であり、その新しい行内に目的の仕様の div を配置します (たとえば、高さ 1px と言います)。 .

HTML、あなたの行の間にこれを追加してください：

<tr class="test_tr" >
    <td colspan="3"><div class="test_div"></div></td>
</tr>

CSS:

.test_tr
{
    height: 1px;
}

.test_div {
    height: 1px;
    width: 80%;
    background-color: red;
    margin: 0 auto;
}

これがフィドルです：http://jsfiddle.net/Y8eWR/

于 2013-09-20T16:03:20.087 に答える