Remove cell border spacing from selected rows-CodePudding

Is it possible to remove the border spacing between the selected rows/cells? i want to remove the spacing between the "content" cells and show it as one row. i tried to add the border-spacing for the selected rows but it doesn't seem to be working

Below is my code

<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 >
     <div >
        <div >
       <table >
            <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>

Any help will be appreciated. Thank you

CodePudding user response：

<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 >
     <div >
        <div >
       <table >
            <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>

CodePudding user response：

Use border-collapse: collapse;
Use <thead> and <div>s inside your <th> elements
Finally, set margin to your DIV elements in TH

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

You don't necessarily need <table> You can achieve something similar using regular DIVs, CSS flex or Grid, and the aria-role="table"