Html table 隐藏行

Question

<!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>

上面的html数据提供了一个table，有对应的行和列。我想要一种格式，其中行之间的线应该只隐藏列线并且 table 边框线应该是可见的。希望我的问题现在很清楚了。我想创建一个 table，其中应隐藏行之间的行

Answer 1

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

Answer 2

您可以使用以下 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 3

试试这个

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}

Answer 4

您需要在 table 标签上设置 css 属性 border 和 border-collapse 并为您的 td 设置右边框。

table {
    border: 1px solid black; 
    border-collapse: collapse;
    width: 100%;
}

td {
  border-right: 1px solid black;
  text-align: center;
  padding: 5px;
}

<table>
  <tr>
    <td> a </td>
    <td> b </td>
  </tr>
  <tr>
    <td> c </td>
    <td> d </td>
  </tr>
</table>

Html table 隐藏行

Html table with Row lines hidden

html

javascript

css

html-table