aligning pieces of text within a table in html

user_14917411 0
Viewed 64

I have the following html/css code:

table,
th,
td {
  border: 1px solid black;
}

.textToBeBorderedGreen {
  border: 1px solid green;
}

.textToBeBorderedRed {
  border: 1px solid red;
}
<table style="width: 100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th style="width: 20%">Job</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td style="width: 20%">
      <div style="width: 70%">really long text that extends towards bottom of table cell</div>
      <div class="textToBeBorderedGreen" style="float: right; width: 30%">Accepted</div>
      <div style="width: 70%">UX Designer</div>
      <div class="textToBeBorderedGreen" style="float: right; width: 30%">Accepted</div>
    </td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td style="width: 20%">Software Developer
      <div class="textToBeBorderedRed" style="float: right">Rejected</div>
    </td>
  </tr>
</table>

With the values in rightmost column, I want the text on the left and right sides to be aligned both vertically (the accepted/rejected text appear directly underneath eachother) and horizontally (the accepted/rejected text appears directly to the right of the leftmost text, and if the leftmost text covers multiple lines then the accepted/rejected text should be in the middle of it) similar to the included image Example

I also wish for the boxes around the accepted/rejected text to be the same length (similar to the image) regardless of how much space the text inside takes - would anyone know how to go about this? The code I've got is the furthest I've managed to go.

css-tables css html
2 Answers

Looks like you are going to have to get into css grids, which is a bit more complicated. here is what your code should be:

table,
th,
td {
    border: 1px solid black;
}

.textToBeBorderedGreen {
    border: 1px solid green;
}

.textToBeBorderedRed {
    border: 1px solid red;
}

.cell {
    grid-template-columns: 70% 30%;
    display: grid;
}

.label-1 {
    grid-column: 1;
}

.label-2 {
    grid-column: 1;
    grid-row: 2;
}

.tag-1 {
    grid-column: 2;
    margin: auto auto;
}

.tag-2 {
    grid-column: 2;
    grid-row: 2;
    margin: auto auto;
}
<link rel="stylesheet" href="table.css">
<table style="width: 100%">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th style="width: 20%">Job</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td class="cell">
            <div class="label-1">really long text that extends towards bottom of table cell</div>
            <div class="textToBeBorderedGreen tag-1">Accepted</div>
            <div class="label-2">UX Designer</div>
            <div class="textToBeBorderedGreen tag-2">Accepted</div>
        </td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td class="cell">
            <div class="label-1">Software Developer</div>
            <div class="textToBeBorderedRed tag-1">Rejected</div>
        </td>
    </tr>
</table>

The parent div defines how the grid will be. I put 70% width for grid column with the words before the "accept" and "rejected" and set the width of the grid column for those words to 30%.

Finally, I set the margin to "auto auto" putting it in the middle horizontally and vertically without disturbing the div's height.

All you have to do now to make the colored boxes fit nicely and look better is to resize the table to fit the colored-border divs

hope this helped!

user_180528970

What you're trying to achieve is very easy with flexbox. I've modified your HTML and added some inline styles. Kindly try this code

table,
th,
td {
  border: 1px solid black;
}

.textToBeBorderedGreen {
  border: 1px solid green;
}

.textToBeBorderedRed {
  border: 1px solid red;
}
<table style="width: 100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th style="width: 20%">Job</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td style="width: 20%">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <div>really long text that extends towards bottom of table cell</div>
        <div class="textToBeBorderedGreen" style="flex-shrink: 0;">Accepted</div>
      </div>
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <div>UX Designer</div>
        <div class="textToBeBorderedGreen" style="flex-shrink: 0;">Accepted</div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td style="width: 20%">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <div>Software Developer</div>
        <div class="textToBeBorderedRed" style="flex-shrink: 0;">Rejected</div>
      </div>
    </td>
  </tr>
</table>

user_62142100
Related