aligning pieces of text within a table in html-CodePudding

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  style="float: right; width: 30%">Accepted</div>
      <div style="width: 70%">UX Designer</div>
      <div  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  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

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.

CodePudding user response：

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 >
            <div >really long text that extends towards bottom of table cell</div>
            <div >Accepted</div>
            <div >UX Designer</div>
            <div >Accepted</div>
        </td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td >
            <div >Software Developer</div>
            <div >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!

CodePudding user response：

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  style="flex-shrink: 0;">Accepted</div>
      </div>
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <div>UX Designer</div>
        <div  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  style="flex-shrink: 0;">Rejected</div>
      </div>
    </td>
  </tr>
</table>