css 删除所选行的单元格边框间距

zvokhttg 于 2023-01-22 发布在其他

关注(0)|答案(2)|浏览(135)

是否可以删除所选行/单元格之间的边框间距？我想删除"内容"单元格之间的间距并将其显示为一行。我尝试为所选行添加border-spacing，但似乎不起作用
下面是我的代码

<html>
<head>
   
    <style>
    
        .flex_container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .inner {
            height:1000px;
            width: 900px;

            background-color:#000;
            
            background-size: cover;
            color: white;
            display: flex;
           /* justify-content: center;
            align-items: center;
            */
        }
        
        .table-border {
  border-collapse: separate;
  border-spacing: 6px 5px;
  table-layout: fixed;

  color: white;
  font-size: 15px;
  display: inline-block;

}

.table-border tr th {
  background-color: rgb(255,255,255,0.6);
  border-radius: 2px;
  padding-right: 35px;
  padding-left: 35px;
  padding-top: 10px;
padding-bottom: 10px;
}
.content-inner {
margin-top: 250px;
margin-left: 50px;
}
      
     
    </style>
</head>
<body>
  <div class="flex_container">
     <div class="inner">
        <div class="content-inner">
       <table class="table-border">
            <tbody>
            <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            </tr>
            <tr style="background:rgba(255, 255, 255, 0.3)">
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            </tr>
            </tbody>
            </table>
            
        </div>
     </div>
  </div>
</body>
</html>

任何帮助都将不胜感激。谢谢

css

来源：https://stackoverflow.com/questions/75195769/remove-cell-border-spacing-from-selected-rows

2条答案

按热度按时间

fjnneemd1#

<html>
<head>
   
    <style>
    
        .flex_container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .inner {
            height:1000px;
            width: 900px;

            background-color:#000;
            
            background-size: cover;
            color: white;
            display: flex;
           /* justify-content: center;
            align-items: center;
            */
        }
        
        .table-border {
  border-collapse: separate;
  border-spacing: 0px;
  table-layout: fixed;

  color: white;
  font-size: 15px;
  display: inline-block;

}

      
.table-border tr th {
  background-color: rgb(255,255,255,0.6);
  border-radius: 2px;
  padding-right: 35px;
  padding-left: 35px;
  padding-top: 10px;
padding-bottom: 10px;  
  border: 5px solid black;
}
.content-inner {
margin-top: 250px;
margin-left: 50px;
}
      
     
    </style>
</head>
<body>
  <div class="flex_container">
     <div class="inner">
        <div class="content-inner">
       <table class="table-border">
            <tbody>
            <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            </tr>
            <tr style="background:rgba(255, 255, 255, 0.3)">
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            </tr>
            </tbody>
            </table>
            
        </div>
     </div>
  </div>
</body>
</html>

赞(0）回复(0）举报 2023-01-22

y1aodyip2#

使用border-collapse: collapse;
在<th>元素中使用<thead>和<div>
最后，在TH中设置DIV元素的边距

body {
  background-color: #000;
  color: white;
}

.table-border {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 15px;
}

.table-border thead th div {
  background-color: rgb(255, 255, 255, 0.6);
  border-radius: 2px;
  padding: 0.8rem 1.4rem;
  margin: 0.3rem;
}

.table-border tbody td {
  background: rgba(255, 255, 255, 0.3);
}

<table class="table-border">
  <thead>
    <tr>
      <th>
        <div>Heading 1</div>
      </th>
      <th>
        <div>Heading 2</div>
      </th>
      <th>
        <div>Heading 3</div>
      </th>
      <th>
        <div>Heading 4</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

您不一定需要<table>。您可以使用常规DIV、CSS flex或Grid以及aria-role="table"实现类似的功能

赞(0）回复(0）举报 2023-01-22

我来回答

css 删除所选行的单元格边框间距

2条答案

相关问题

热门标签

最新问答