How to move text in table-cells without increasing/decreasing original size of td?

Question

I have a simple HTML table. I would like to move text in all columns to the right side in the second row. I've read this question and this which give advice to set box-sizing: border-box;, however it does not give desired result. I mean, that the width of first td increases, if I add padding-left to div. But I want to keep original width of td, but text should be moved to right for 80px in each column.

 * {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }

 table {
   border-collapse: collapse;
   width: 100%;
 }
 table td, table th {
   border: 1px solid black;
 }
 table tr:first-child th {
   border-top: 0;
 }
 table tr:last-child td {
   border-bottom: 0;
 }
 table tr td:first-child,
 table tr th:first-child {
   border-left: 0;
 }
 table tr td:last-child,
 table tr th:last-child {
   border-right: 0;
 }

 .move-right td > div {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   font-weight: bold;
   max-width: 100%;
   background-color: lightgreen;
 }

 .move-right td > div div {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   font-weight: bold;
   background-color: lightpink;
   padding-left: 80px;
 }

<table class="table">
  <thead>
    <tr>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Book</th>
    </tr>
  </thead>
  <tbody>
     <tr>
      <td>Jon</td>
      <td>Skeet</td>
      <td>C# in Depth</td>
     </tr>
     <tr class="move-right">
      <td >
     <div><div>Joseph</div></div>
      </td>
      <td>Albahari</td>
      <td>C# in Nutshell</td>
     </tr>
  </tbody>
 </table>

My desired result looks like this:

It can be seen from the image of the desired result that:

all columns have the same width
text in all columns moved slightly to the right(80px)

How is it possible to do? Any help would be greatly apprecited! Thank you!

@Manjuboyz becase I wanted to apply `box-sizing: border-box;` — Learner, Apr 25 '20 at 17:25

Manjuboyz · Answer 1 · 2020-04-25T17:56:22.223

2

It looks like your code seems very odd to me where you can really make things simple! assuming it is your requirement and you have to follow this!

here is something you can do, I have created a class and then have given padding ONLY to that td.

 * {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }

 table {
   border-collapse: collapse;
   width: 100%;
 }
 table td, table th {
   border: 1px solid black;
  
 }
 table tr:first-child th {
   border-top: 0;
 }
 table tr:last-child td {
   border-bottom: 0;
 }
 table tr td:first-child,
 table tr th:first-child {
   border-left: 0;
 }
 table tr td:last-child,
 table tr th:last-child {
   border-right: 0;
 }
  
  .fixThis  td{
    background-color:grey;
    padding-left:80px;
  }

 .move-right td{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   font-weight: bold;
   max-width: 100%;
   background-color: lightgreen;
    padding-left:80px;
 }

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Book</th>
    </tr>
  </thead>
  <tbody>
    <tr class="fixThis">
      <td>Jon</td>
      <td>Skeet</td>
      <td>C# in Depth</td>
    </tr>
    <tr class="move-right">
      <td>
        <div>
          <div>Joseph</div>
        </div>
      </td>
      <td>Albahari</td>
      <td>C# in Nutshell</td>
    </tr>
  </tbody>
</table>

edited Apr 25 '20 at 17:56

answered Apr 25 '20 at 17:08

Manjuboyz

6,978
3
21
43

thank you for your response! I need to move all columns to the right side just in the second row. Thanks! – Learner Apr 25 '20 at 17:23
@Learner I have updated my answer now, check it. I just removed one the the css class which is not required, we can still optimize this, let me know if this is what you need then I can look into optimizing bit more. – Manjuboyz Apr 25 '20 at 17:25
yeah, here it works! However, I cannot figure out why it does not work in Angular. [Could you be very kind to see this question?](https://stackoverflow.com/questions/61416704/table-cells-increases-width-despite-box-sizing-border-box?noredirect=1#comment108650797_61416704) – Learner Apr 25 '20 at 17:38
1

@Learner where should I look into a stack overflow question or Angluar snippet ? – Manjuboyz Apr 25 '20 at 17:40
Please, see [the question](https://stackoverflow.com/questions/61416704/table-cells-increases-width-despite-box-sizing-border-box?noredirect=1#comment108650797_61416704) and it contains reproduced behavior. And if you click `View` at the stackblitz example, then you can see undesired behavior. If you have thought how it could be solved, please, post your answer in my post. – Learner Apr 25 '20 at 17:42
@Learner remove the `move-right` from td, just use only `td` copy paste this: td{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-weight: bold; max-width: 100%; background-color: lightgreen; padding-left:80px; } – Manjuboyz Apr 25 '20 at 17:45
@Learner I have added working screen shot, if you would like to check. – Manjuboyz Apr 25 '20 at 17:48
thanks for your reply. But I need to move text inside if `td` which only contains `a`, `b`, `c` values. The other columns should not be moved. Columns which contain `a`, `b`, `c` values`should be moved to the right – Learner Apr 25 '20 at 17:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212493/discussion-between-manjuboyz-and-learner). – Manjuboyz Apr 25 '20 at 17:49

score 2 · Accepted Answer · answered Apr 25 '20 at 17:17

Why don't you just apply the padding-left: 80px; to the cell itself, using .move-right td as the selector for it?:

BTW, if you really want all columns to have the same width, you should add width: 33.33%; to that same selector in order to avoid the width distribution due to the contents.

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }

 table {
   border-collapse: collapse;
   width: 100%;
 }
 table td, table th {
   border: 1px solid black;
 }
 table tr:first-child th {
   border-top: 0;
 }
 table tr:last-child td {
   border-bottom: 0;
 }
 table tr td:first-child,
 table tr th:first-child {
   border-left: 0;
 }
 table tr td:last-child,
 table tr th:last-child {
   border-right: 0;
 }

 .move-right td > div {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   font-weight: bold;
   max-width: 100%;
   background-color: lightgreen;
 }

 .move-right td > div div {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   font-weight: bold;
   background-color: lightpink;
 }
  .move-right td {
      padding-left: 80px;
      width: 33.33%;
  }

<table class="table">
  <thead>
    <tr>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Book</th>
    </tr>
  </thead>
  <tbody>
     <tr>
      <td>Jon</td>
      <td>Skeet</td>
      <td>C# in Depth</td>
     </tr>
     <tr class="move-right">
      <td >
     <div><div>Joseph</div></div>
      </td>
      <td>Albahari</td>
      <td>C# in Nutshell</td>
     </tr>
  </tbody>
 </table>

can I get rid off the following classes `.move-right td > div div` and `.move-right td > div`? — Learner, Apr 25 '20 at 17:21
If you don't need different background colors, sure. And if you do need bold text in there, you could use a `span` with an according class (`span` is an inline element which won't affect width, borders etc.) And of course, move the `box-sizing: border-box` to the new rule. — Johannes, Apr 25 '20 at 17:24
yeah, here it works! However, I cannot figure out why it does not work in Angular. [Could you be very kind to see this question?](https://stackoverflow.com/questions/61416704/table-cells-increases-width-despite-box-sizing-border-box?noredirect=1#comment108650797_61416704). This question has a link to the stackblitz to see reproduced behavior. — Learner, Apr 25 '20 at 17:38

How to move text in table-cells without increasing/decreasing original size of td?

2 Answers2