Add common CSS to all the elements having same attribute

Question

I have a table section as below. I want that wherever I have "col" attribute a margin of 20px should be added on the left. I just need help with the syntax for this.

I have edited the question and included my complete code here. Please note that in the mobile view each row is stacked on top another.

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

     
      
}

I don't know how to write this. Any suggestions?

Remember that when using ::after you need the rule: content: ''; — Royal Wares
– Royal Wares, Commented Aug 20, 2020 at 7:14
This new code has totally changed the problem. What exactly is it that you are trying to do - add space inside the cells? And in which media query? Also, there is space showing on the right in both media queries so I'm not clear what the problem is? — FluffyKitten
– FluffyKitten, Commented Aug 20, 2020 at 7:33
In mobile view. I just need space between the title and the data i.e. between Name and name value, & so forth. — HarshVardhan Bandta
– HarshVardhan Bandta, Commented Aug 20, 2020 at 7:36

FluffyKitten · Accepted Answer · 2020-08-20 09:37:31Z

If you want to select the td with col attribute, you can do it like this:

td[col]{ }

But note that margin-right won't work on the td - you have to use padding.

When you are dealing with tables, you can't apply the same spacing in the same way as you can for other elements, For example:

you can't add margin to a table cell
you can't add different sized borders between cells

Working Snippet using padding:

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>

UPDATE: Your edit totally changed the question so the above answer no longer helps.

The problem now is that you are adding the padding in the wrong place. You are adding the title outside the table structure by using :before, so when you try to add padding to the cell itself, it isn't getting added where you want it.

This is your CSS and it is correct, except that your titles are not in a cell so it is not adding the padding to them:

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

Instead, you need to add the padding in the CSS rule that styles the title, e.g.

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

Working Snippet (Note I've increased the media query to 5000px so we can see it here):

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

UPDATE 2

To select the cells with specific col values, you can do this:

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

To make all the titles the same width, you can do this:

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

hi.I tried this but didn't reflect in my code. I have edited the question and included the actual code. Could please tell me what am I missing out here?
@HarshVardhanBandta Your new question is a totally different problem! It uses flex layout and padding, not td and margins. If you have a different question, you should add it as a new post. Each question on Stack Overflow should be about one specific problem (and not change problem half way through :) )
Yes. But I still need to access the attribute. I just need the syntax. Could you please help out?
@HarshVardhanBandta I've shown you how to access the attribute, and you can see it working in the snippet. See my comment on your question - what you want is unclear so we can't help out until we know exactly what you want.
In mobile view. I just need space between the title and the data i.e. between Name and name value, & so forth.

Raida · Accepted Answer · 2020-08-20 07:19:15Z

0

You can do this to select all cells with col attribute:

td[col]{
  padding-right: 20px;
}

If you want to select cells with col equals to "Name", you can do this:

td[col="Name"]{
  padding-right: 20px;
}

You can find more information here.

edited Aug 20, 2020 at 7:19

answered Aug 20, 2020 at 7:08

Raida

1,5369 silver badges23 bronze badges

4 Comments

FluffyKitten Over a year ago

@HarshVardhanBandta That's because you can't apply margin to table cells, see my answer below

Raida Over a year ago

Try with padding rather than margin, or use border-collapse: separate

HarshVardhan Bandta Over a year ago

yes. i already that. please check the updated code in the question.

Raida Over a year ago

If you want a margin on the left, then you have to use padding-left instead of padding-right

Collectives™ on Stack Overflow

Add common CSS to all the elements having same attribute

2 Answers 2

10 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Related