0

私は自分のテーブルに関して奇妙な問題を抱えています。ユーザーがそれぞれの違いを理解できるようborderに、自分に追加したいと思います。rowsrows

私のhtml

<table>
  <tr class='rows'>
    <td class='test'> test1</td>
    <td class='test'> test2</td>
    <td class='test'> test3</td>
  </tr>
  <tr class='rows'>
    <td class='test'> test8</td>
    <td class='test'> test9</td>
    <td class='test'> test7</td>
  </tr>
  <tr class='rows'>
    <td class='test'> test4</td>
    <td class='test'> test5</td>
    <td class='test'> test6</td>
  </tr>

   more...
</table>

私のテーブルCSS

table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}

.rows{
  border: solid 5px red;  //this border properties doesn't work.
  background-color:grey;  //this would change the background colors
}

コードのどこが悪いのか理解できませんでした。誰かがそれについて私を助けることができますか？どうもありがとう！

4

2 に答える 2

2

displayプロパティを変更しない限り、表の行に罫線を適用することはできません。推奨される解決策は、テーブル セルに境界線を設定することです。

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table td {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

テーブルセル間にスペースが必要な場合は、padding.

于 2013-01-03T02:08:39.077 に答える
1

を削除するだけです

display:table;

あなたのCSSで..

このjsfiddleを見てください...

于 2013-01-03T02:35:49.057 に答える