Question

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <table border="1" style="width:100%">
    <tr>
      <th>A</th>
      <th>B</th>
    </tr>
    <tr>
      <td>10</td>
      <td>10</td>
    </tr>
  </table>
</body>

</html>

＆＃13;

上面的html数据提供了一个包含相应行和列的表。我想要一种格式，其中应该隐藏行之间的行，只有列线和表格边框线应该是可见的。希望我的问题现在很明确。我想创建一个表格，其中行之间的行应隐藏

Answer 1

您可以使用以下css：

JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/

<强> HTML

<table id="thetable">
    <tr><td>A</td><td>B</td><td>C</td></tr>
    <tr><td>2</td><td>2</td><td>2</td></tr>
</table>

<强> CSS

#thetable {
    border: 2px solid gray;
    background: lightgray;
    border-spacing: 0px;
    border-collapse: collapse;
}
#thetable td{
    border-right: 2px solid gray;
    padding: 20px;
}

Answer 2

您需要在表标记上设置css属性This line - 03和border，并为您的td设置右边框。

border-collapse

table {
    border: 1px solid black; 
    border-collapse: collapse;
    width: 100%;
}

td {
  border-right: 1px solid black;
  text-align: center;
  padding: 5px;
}

Answer 3

<table frame="box" rules="cols">
   <tr>
      <th>Month</th>
      <th>Savings</th>
   </tr>
   <tr>
      <td>January</td>
      <td>$100</td>
   </tr>
</table>

Answer 4

试试这个

JsFieddle

HTML

   <table style='border:solid'  cellpadding="10"  cellspacing="0">
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>

CSS

td{border-right:solid}

隐藏行线的Html表

4 个答案: