Question

如何设置表格行的左右边距（或类似的东西以获得相同的结果）？我尝试border-collapse:separate; border-spacing:20px;但删除了行边框底部。

这就是我想要创建的内容：

Answer 1

向表中添加一个类，然后向左右添加填充。

table class =“some-table”

.some-table { 填充左：10px的; 填充右：10px的; }

应该有用。

如果没有，则在左边添加一个类，然后将填充附加到左侧和右侧。

Answer 2

我不认为表格是可行的。

这里有div和span。我希望你喜欢它：

<html>
 <head>
  <style>
   div#outer {
    border: 10px solid black;
    width: 30em;
   }
   div#header {
    background-color: red;
    color: white;
    text-align: center;
   }
   div.row {
    border-bottom: 1px dashed red;
    margin: 10px 20px;
    clear: both;
   }
   span.left {
    float: left;
   }
   span.right {
    margin-left: 10em;
   }
  </style>
</head>
 <body>
  <div id="outer">
  <div id="header">Some table head text</div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
  </div>
 </body>
</html>

表格行上的左右边距

2 个答案: