0

テーブルがあり、要素にマージンを追加して、テーブルの列全体を埋めずに要素に影響を与えないように下の境界線を設定したいと思います。これを確認する別の方法は、with border-collapse：separateとwith border-collapse：collapseを使用することですが、これは残念ながら機能しません。

ヘッダー用とボディ用の2つのテーブルを使用することを考えました。また、テーブルセル以外のものからth要素のth表示を変更します。どちらも厄介なので、存在する場合よりも優れた解決策を探しています。

これを理解するためにすばやくプレイしたい場合は、いくつかのcssを含むテーブルがあるjsFiddleを次に示します。

これは、主にjsFiddleでこれを実行して、私が望むことを実行しようとしたコードの一部です。

HTML

<table>
  <thead>
    <tr>
        <th>Month</th>
        <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$200</td>
    </tr>
  </tbody>
</table>​

CSS

table
{
    width:100%;
    padding:2px;
    border-collapse: collapse;
}
td
{
    padding:2px;
}
th
{
    border-bottom:2px solid gray;
    padding: 0 2px 5px;
    line-height: 15px;
    margin: 0 10px 0 0;
}

編集：うまくいけば、これは私が達成しようとしていることを説明するでしょう

---------------------------------------------
|Month     |Amount     |Month     |Amount      | <--TH element
|--------   ---------   --------   ---------   | <--bottom border doesn't fill cell
|----------------------------------------------|
|Jan       |$100       |Jan       |$100        |
|----------------------------------------------|
|Feb       |$200       |Feb       |$200        |
|----------------------------------------------|
4

2 に答える 2

0

sが受け入れないので、私が恐れている要素tdや要素にマージンを追加する必要があります。thtr

于 2012-06-19T17:40:27.380 に答える
0

私があなたを理解しているなら、これはあなたが望むもののようなものです：

http://jsfiddle.net/VywK7/21/

th {
    background-color: yellow;
}
th {
    border-top: 4px solid gray;
    border-bottom: 4px solid gray;
}
th:first-child {
    border-left: 4px solid gray;
}
th + th + th + th, /* choose one of these selectors */
th:last-child {
    border-right: 4px solid gray;
}

疑似要素の楽しみ：http: //jsfiddle.net/VywK7/23/

th:after {
    content: ' ';
    display:block;
    width: 50%;
    background: red;
    height: 4px;
    margin-bottom: 4px;
}
于 2012-06-20T14:57:56.627 に答える