代码之家 › 专栏 › 技术社区 › Juan Salvador Portugal

Bootstrap 4桌,带d-flex和其他边框颜色

bootstrap-4 html-table twitter-bootstrap css html

Juan Salvador Portugal · 技术社区 · 6 年前

我正在使用Bootstrap4.0,我正在尝试使用 table-bordered d-flex 具有 col-* 调整列大小。

问题是,由于某种原因,如果我试图改变颜色,所有的边框都是双边框。

例如,这就是我要做的:

table.table-bordered {
  border: 1px solid black;
  }
table.table-bordered > thead > tr > th {
  border: 1px solid black;
  }
table.table-bordered > tbody > tr > td {
  border: 1px solid black;
  }        
div{
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  }

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   
<div>
   <table class="table table-bordered">
        <tbody>
            <tr class="table-danger d-flex">
                <td class="col-6">Cell 1</td>
                <td class="col-6">Cell 2</td>
            </tr>
            <tr class="d-flex">
                <td class="col-6">Cell 3</td>
                <td class="col-6">Cell 5</td>
                
            </tr>
        </tbody>
    </table>
</div>

如您在示例中所见,边框是双边框。

与 w-*

我怎样才能用 d-flex公司 col列-*

2 回复 | 直到 6 年前

Carol Skelly 6 年前

与 border-collapse HTML表格“自动”处理相邻行和单元格周围的重复边框 explained here .

若要修复此问题,只需在 tbody td 细胞。

table.table-bordered {
     border-width: 0;
}

table.table-bordered tbody {
    border-style: solid;
    border-color: black;
    border-width: 1px  0   0  1px;
}

table.table-bordered td {
    border-color: black;    
    border-width:  0  1px 1px  0;
}

https://www.codeply.com/go/JAst9a3XHr

charan kumar 6 年前

仅对具有负边距的td使用边框,并删除table和th的边框

table.table-bordered > tbody > tr > td {
  border: 1px solid black;
  margin:-0.5px;
}        
div{
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   
<div>
   <table class="table table-bordered">
        <tbody>
            <tr class="table-danger d-flex">
                <td class="col-6">Cell 1</td>
                <td class="col-6">Cell 2</td>
            </tr>
            <tr class="d-flex">
                <td class="col-6">Cell 3</td>
                <td class="col-6">Cell 5</td>
                
            </tr>
        </tbody>
    </table>
</div>