隐藏行行的 Html 表答案

【问题标题】：Html table with Row lines hidden隐藏行行的 Html 表
【发布时间】：2015-05-13 21:29:59
【问题描述】：

<!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 数据提供了一个表格，表格有相应的行和列。我想要一种格式，其中行之间的线应该被隐藏，只有列线和表格边框线应该是可见的。希望我的问题现在很清楚。我想创建一个表，其中行之间的行应该被隐藏

【问题讨论】：

你说的不清楚，请发布你的代码，随便你，在这里创建演示JSFiddle
嗨，你看不到截图吗
不，发一个更大的。并告诉我们你尝试了什么。

标签： javascript html css html-table

【解决方案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;
}

【讨论】：

【解决方案2】：

你需要在你的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>

【讨论】：

【解决方案3】：

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

【讨论】：

坦率地说，我试图以我知道的方式给出答案，以解决其他问题。

【解决方案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}

【讨论】：