0

単一の TR タグと 2 つの TD タグを持つ HTML テーブルがあります。各 TD には 2 つの水平線または HR タグがあり、いくつかのテキストがあります。そのため、各列の下部にあるTDと水平線の上にテキストを修正したいと思います。

ここにサンプルコードがあります。

  <html>
<body>
    <table width="100%">
        <tr>
            <td style="text-align: left; width: 50%;">
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <hr width="40%" />
            </td>
            <td style="text-align: left; width: 50%;">
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                <hr width="40%" />
            </td>
        </tr>
    </table>
</body>
</html>
4

3 に答える 3

2

を削除して<hr>、それぞれの下部に境界線を追加するだけです<td>。

<td style="text-align: left; width: 50%; border-bottom: 1px solid red;"></td>

を保持したい場合<hr>(たとえば、幅が のように広くない場合は<td>、代わりに次のように使用します。

<hr style="display:inline-block; width:40%;">
于 2012-08-14T12:41:28.743 に答える
2

hr要素を取り除き、 border-bottomCSS プロパティを使用tdして行を下部にレンダリングしvertical-align、テキストを強制的に上部に表示します。

于 2012-08-14T12:42:13.593 に答える
2

のテキスト行の下に行を作成しhrます

<tr>
  <td>
    Text
  </td>
  <td>
    Text
  </td>
</tr>
<tr>
  <td>
    <hr width="40%" />
  </td>
  <td>
    <hr width="40%" />
  </td>
</tr>

個々の行の高さを制御して、任意の種類の間隔を取得できるようになりました

于 2012-08-14T12:43:21.450 に答える