时间戳

首页 > 解决方案 > 为所有具有相同属性的元素添加通用 CSS

html - 为所有具有相同属性的元素添加通用 CSS

问题描述

我有一个表格部分，如下所示。我希望无论我有“col”属性，都应该在左侧添加 20px 的边距。我只需要语法方面的帮助。

我已经编辑了问题并在此处包含了我的完整代码。请注意，在移动视图中，每一行都堆叠在另一行之上。

<div class="tableComponent">   
<table class="table table-striped" id="table">
  <thead>
    <tr>
      
      <th scope="col">Name</th>
      <th scope="col">Designation</th>
      <th scope="col">Contact Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      
      <td col="Name">Mark</td>
      <td col="Designation">Otto</td>
      <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
  </tbody>
</table>
</div>

CSS

.tableComponent table{
  font-family: 'Poppins';
  font-size:12px;
  width: 50%;
  border-collapse: separate;
}

.tableComponent table thead th{
  
  border-bottom: 0px;
}

.tableComponent table td,th{
  border-top: 0px;
}


.tableComponent .table-striped tr:nth-child(even){
    background-color:#F8F8F8 
 }

 .tableComponent tr{
    border: hidden;
    
}

@media all and (max-width: 500px){

    .tableComponent table{
    width: 90%;
    margin-left: 5vw
    }

    .tableComponent  thead {
        display: none;
      }
      
    .tableComponent  tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
        
      }
      
      .tableComponent td::before {
        content: attr(col);
        font-weight: bold;
        
      }

      .tableComponent td[col]{
        padding-right: 5rem;
      }

     
      
}

我不知道怎么写这个。有什么建议么？

标签： htmlcss

解决方案

如果要选择tdwithcol属性，可以这样做：

td[col]{ }

但请注意，这margin-right不适用于 td - 您必须使用填充。

当您处理表格时，您不能以与其他元素相同的方式应用相同的间距，例如：

  • 您不能向表格单元格添加边距
  • 你不能在单元格之间添加不同大小的边框

使用填充的工作片段：

td[col]{
        padding-right: 20px;
      }
<table>
<tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    </table>

更新：您的编辑完全改变了问题，因此上述答案不再有帮助。

现在的问题是您在错误的位置添加了填充。您正在使用 将标题添加到表格结构之外:before，因此当您尝试向单元格本身添加填充时，它不会被添加到您想要的位置。

这是您的 CSS，它是正确的，只是您的标题不在单元格中，因此它没有向它们添加填充：

 .tableComponent td[col]{
    padding-right: 5px;
  }

相反，您需要在样式标题的 CSS 规则中添加填充，例如

  .tableComponent td::before {
    content: attr(col);
    font-weight: bold;
    padding-right: 10px;
  }

工作片段（注意我已将媒体查询增加到 5000 像素，因此我们可以在这里看到）：

.tableComponent table{
  font-family: 'Poppins';
  font-size:12px;
  width: 50%;
  border-collapse: separate;
}

.tableComponent table thead th{
  
  border-bottom: 0px;
}

.tableComponent table td,th{
  border-top: 0px;
}


.tableComponent .table-striped tr:nth-child(even){
    background-color:#F8F8F8 
 }

 .tableComponent tr{
    border: hidden;
    
}


@media all and (max-width: 5000px){  

    .tableComponent table{
    width: 90%;
    margin-left: 5vw
    }

    .tableComponent  thead {
        display: none;
      }
      
    .tableComponent  tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
        
      }
      
      .tableComponent td::before {
        content: attr(col);
        font-weight: bold;
        padding-right: 10px;
      }
}
<div class="tableComponent">   
<table class="table table-striped" id="table">
  <thead>
    <tr>
      
      <th scope="col">Name</th>
      <th scope="col">Designation</th>
      <th scope="col">Contact Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      
      <td col="Name">Mark</td>
      <td col="Designation">Otto</td>
      <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
  </tbody>
</table>
</div>

更新 2

要选择具有特定col值的单元格，您可以执行以下操作：

.tableComponent td[col="Name"]::before {
    padding-right: 20px;
}
.tableComponent td[col="Designation"]::before {
    padding-right: 5px;
}

要使所有标题的宽度相同，您可以这样做：

.tableComponent td::before {
    width: 100px;
    display:inline-block;
}

推荐阅读