3

My result and expectation in the image below: enter image description here

for that I tried:

<table>
  <tr>
    <td>Name:-</td>
    <td><strong>XYZ</strong></td>
    <span style="float: right;">
     <td>Age:-</td>
     <td><strong>38</strong></td>
   </span>
  </tr>
</table>

My result and expectation in the image below: enter image description here

John
  • 10,165
  • 5
  • 55
  • 71
user10670473
  • 65
  • 1
  • 8
  • 1
    It looks like you're using tables wrong. you can put a `span` element inside the table cell but you can't wrap a table cell within a `span` as you did. it messes up the alignment of the table. Also, why are all the empty ``? what's their purpose? You can read more about the HTML table [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) and [here](https://www.quackit.com/html/html_table_tutorial.cfm) – Thatkookooguy May 19 '19 at 11:14
  • @Thatkookooguy empty columns were by mistake, How to make two columns at left and two columns at right? – user10670473 May 19 '19 at 11:18

1 Answers1

4

You can do that by using the default table layout mode and expanding the second table cell.

Because the table layout mode is set to auto, even if we expand one cell to the width of the table, the layout will expand that cell to take as much space as possible.

table {
  width: 100%; /* <-- only this is necassery for this effect */
  padding: 0.5em;
  background: lightgrey;
}

.expand {
  width: 100%;
}
<table>
  <tr>
    <td>Name:-</td>
    <td class="expand"><strong>XYZ</strong></td>
    <td>Age:-</td>
    <td><strong>38</strong></td>
  </tr>
</table>

The same effect can be achieved by adding an empty cell and expanding it:

<table>
  <tr>
    <td>Name:-</td>
    <td><strong>XYZ</strong></td>
    <td class="expand"></td>
    <td>Age:-</td>
    <td><strong>38</strong></td>
  </tr>
</table>
Thatkookooguy
  • 6,669
  • 1
  • 29
  • 54
  • Is there any class for the same in bootstrap 4? – user10670473 May 19 '19 at 11:41
  • @user10670473 most bootstrap classes contain more than one CSS attribute. you can use the `col-lg-12` to set `width: 100%` but it might set additional things you don't want in this case. If you really want to avoid using your own class, you can always use `style="width: 100%"` in the same way you applied the `float: right` – Thatkookooguy May 19 '19 at 11:47