CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 1327

css table - how to align center based on specific columns

I want to make the "Body" text align to center of last 4 columns instead of center of 5 columns. How can I achieve that?

enter image description here

<tr>
  <td style="text-align:center;" colspan="5" class="sep">Body</td>
</tr>


* {
  box-sizing:border-box;
  padding:0;
  margin:0;
   outline: 0;
}
body { 
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:14px;
  padding:14px;
}
table { border-collapse:collapse; table-layout:fixed; width:100%;}
th { background:#F5F5F5; display:none; }
td, th {
  height:53px
}
td,th { border:1px solid #DDD; padding:10px; empty-cells:show; }
td,th {
  text-align:left;
}
td+td, th+th {
  text-align:center;
  display:none;
}
td.default {
  display:table-cell;
}
td.txt-left,tr.txt-left{
  text-align:left;
}
.sep {
  background:#F5F5F5;
  font-weight:bold;
}
.txt-l { font-size:28px; font-weight:bold; }
.txt-top { position:relative; top:-9px; left:-2px; }
.tick { font-size:18px; color:#2CA01C; }
.cross { font-size:18px; color:#e60505; }
.white {
  border:0;
  background:white;
}

@media (min-width: 640px) {
  td,th {
    display:table-cell !important;
  }
  td,th {
    width: 120px;
  
  }
  td+td, th+th {
    width: auto;
  }
}
<table>
  <thead>
    <tr>
      <th class="white"></th>
      <th>44mm (GPS+Cellular)</th>
      <th>44mm (GPS)</th>
      <th>40mm (GPS+Cellular)</th>
      <th>40mm (GPS)</th>
    </tr>
  </thead>
  <tr>
    <td>Price</td>
    <td><span class="txt-top">&dollar;</span><span class="txt-l">1</span></td>
    <td><span class="txt-top">&dollar;</span><span class="txt-l">2</span></td>
    <td><span class="txt-top">&dollar;</span><span class="txt-l">3</span></td>
    <td><span class="txt-top">&dollar;</span><span class="txt-l">4</span></td>
  </tr><tr>
    <td style="text-align:center;" colspan="5" class="sep">Body</td>
  </tr>
  <tr>
    <td>Dimension</td>
    <td colspan="2">44 x 38 x 10.4 mm<br>(1.73 x 1.50 x 0.41 in)</td>
    <td colspan="2">40 x 34 x 10.4 mm<br>(1.57 x 1.34 x 0.41 in)</td>
  </tr>
</table>

Upvotes: 0

Views: 112

Answers (1)

AdamKniec
AdamKniec

Reputation: 1717

You need to set the width of the "Body" wrapper element to match the width of the 4 columns above. You can make it work by:

  • setting the width of the "Body" wrapper and aligning it to the right
  • set the margin/padding-left of the "Body" wrapper element to adjust the width
  • position:absolute and style appropriately (It might work but I'd not go for that)
  • Show us more of Your HTML code. It's probably a best way to manipulate the table-related HTML to group those fields correctly

Upvotes: 1

Related Questions