CODEWITHSUNDEEP
htmlcss
aa100
aa100

Reputation: 31

How to align spans within a table cell with the spans in the cell below it?

I've a requirement in which I want to show an icon, a text and another icon inside a table cell. To create this, I'm building spans within a td. Something like this:

<table>
  <tr>
    <td>
      <span>ICON 1</span>
      <span>Some Value</span>
      <span>ICON 2</span>
    <td>
  </tr>
  <tr>
    <td>
      <span>ICON 3</span>
      <span>Some big big value</span>
      <span>ICON 4</span>
    <td>
  </tr>
</table>

The problem with this approach is the spans are not getting properly aligned. Icons will be of same size always, but the middle span (text) will vary in length. For e.g. the above code will appear as: enter image description here

But, what I want is something like:

enter image description here

Both the icons and the text has to be a part of a single cell. Creating different columns for text and icons will break something else for me.

Any suggestions on how this can be done?

Update: How can I get the text to be right-aligned?

enter image description here

Upvotes: 0

Views: 4648

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 106058

your td is missing.

you could look at float.(assuming icons are same size)

td span {
  float:left;
  margin:0.25em;
}
td span:last-of-type {
  float:right;
}
<table>
  <tr>
    <td>
      <span>ICON 1</span>
      <span>Some Value</span>
      <span>ICON 2</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>ICON 3</span>
      <span>Some big big value</span>
      <span>ICON 4</span>
    </td>
  </tr>
</table>

align right on middle span N

tr {
  display:table;
  width:100%;
  white-space:nowrap;
  }
td {
  display:table-row;
  }
td span {
  display:table-cell;
  padding:0.25em;
}
td span:nth-child(2) {
  text-align:right;
  width:100%;
  
}
<table>
  <tr>
    <td>
      <span>ICON 1</span>
      <span>Some Value</span>
      <span>ICON 2</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>ICON 3</span>
      <span>Some big big value</span>
      <span>ICON 4</span>
    </td>
  </tr>
</table>

Upvotes: 2

marcanuy
marcanuy

Reputation: 24012

You are missing the td tag.

This set columns in your table, no CSS needed.

https://jsfiddle.net/Lnynfv9t/

<table>
  <tr>
    <td>ICON 1</td>
    <td>Some Value</td>
    <td>ICON 2</td>
  </tr>
  <tr>
    <td>ICON 3</td>
    <td>Some big big value</td>
    <td>ICON 4</td>
  </tr>
</table>

Upvotes: 0

Fergal Andrews
Fergal Andrews

Reputation: 314

I'm presuming you forgot to wrap your spans in table columns.

In any case, in your CSS set your spans to display: block. Give then all the same width, pixels or percentages. Add a background image for one icon and set it to top left. Add the other icon as a background image to top right and put padding on the left of the span to sit the text to the right of the icon.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122145

You can do this 

.table {
  display: table;
}

.row {
  display: table-row;
}

span {
  display: table-cell;
  padding: 0 5px;
}
<div class="table">
  <div class="row">
    <span>ICON 1</span>
    <span>Some Value</span>
    <span>ICON 2</span>
  </div>
  <div class="row">
    <span>ICON 1</span>
    <span>Some Value lorem ipsum</span>
    <span>ICON 2</span>
  </div>
</div>

Upvotes: 0

Related Questions