样式表类测试一切正常但是细胞边界已经消失了

Question

我正在尝试用样式表替换内联样式

<table width="100%" border="6" cellspacing="3" cellpadding="6"  bgcolor="#D3B696" >

带

带样式表

.test {
    text-align: center;
    border-collapse: separate ;
    width: 720px ;
    border: ridge ;
    border-width: 6px;
    background-color: #D3B696 ;
    border-spacing: 3px ;  padding: 6px;
}

除了细胞边界之外的所有工作已经消失

Answer 1

要添加单元格边框，您需要为表格中的td元素添加css规则。请参阅下面的.test td规则集，并注意.test和td之间的空格。空格意味着您选择的所有td元素都是包含.test类的元素的后代。

＆＃13;

＆＃13;

.test {
  text-align: center;
  border-collapse: separate;
  width: 720px;
  border: ridge;
  border-width: 6px;
  background-color: #D3B696;
  border-spacing: 3px;
  padding: 6px;
}
.test td {
  border: ridge;
  border-width: 6px;
}

＆＃13;

<table class="test">
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;