Properly align spacing between elements in a table cell

Question

I've tried searching, but I don't know what to call this. I'm trying to do accomplish what looks like the left side in this picture:

However when I change the width of the page, it folds and causes an unwanted behavior.

I'm using margin-left: 50px; float:left for the caret and margin-right: 50px for the text.

http://embed.plnkr.co/v68tw85oYqEeBmfCreD5/preview

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="table table-bordered text-center">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td><i class="fa fa-caret-up" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">2332</span></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td style="width: 300px"><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Is there a better way of doing this without the folding?

DRD · Accepted Answer · 2015-07-23T18:47:46.833

Try the following: http://jsfiddle.net/jLod5cv9/. Each element of the cell is set to be inline-block and white-space: nowrap declaration should keep these together.

HTML:

<table>
    <tr><td class = "up" data-number = "3"></td></tr>
    <tr><td class = "down" data-number = "-55"></td></tr>
    <tr><td class = "down" data-number = "-44"></td></tr>
    <tr><td class = "up" data-number = "1"></td></tr>
    <tr><td class = "up" data-number = "65"></td></tr>
</table>

CSS:

table {
    border-collapse: collapse;
}

table td {
    white-space: nowrap;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: green;
}

table td.down {
    color: red;
}

table td:after {
    content: attr(data-number);
    display: inline-block;
    font: normal 12px/1 Sans-Serif;
    width: 25px;
    text-align: center;
}

table td:before {
    content: "";
    display: inline-block;
    border-style: solid;
    border-width: 0px 4px 5px 4px;
    border-color: transparent transparent green transparent;
    margin-right: 15px;
}

table td.down:before {
    border-width: 5px 4px 0 4px;
    border-color: red transparent transparent transparent;
}

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

When using margin, you tell the page to have a defined margin there. if there is not enough space horizantally to display all parts, then a linebreak is inserted, what causes your strange view. Maybe this could help you.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 23 '15 at 18:09

Julian Berger

157
1
10

1

I didn't downvote, thank you for your link. I'm simply trying to make text x pixels away from the text to the right of it, but x should always be the same for every row. – ECMAScript Jul 23 '15 at 18:26

score 0 · Answer 3 · answered Jul 23 '15 at 18:36

I can't find a way to have it exactly in the middle mainly because your digits will always change. Sometimes you will have 4, sometimes 2 so getting it exactly the way you provided at the top won't happen. However, if you get it mostly with the same digits, like 2, then the way I posted here will work http://plnkr.co/edit/vQeSURKTVyoeaj6MqsxX?p=preview . I took out your hardcode in the html and used straight css.

css:
/* Styles go here */
tbody tr td { width: 33%;}
tbody tr td:nth-child(4) { width:33%;}
tbody tr td i { width:50%; text-align:right; margin-right:10px;}
tbody tr td span { width:50%; text-align:left;}

html:

<body>
<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Money</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><i class="fa fa-caret-up" ></i><span>2332</span></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><i class="fa fa-caret-down"></i><span>1.2</span></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><i class="fa fa-caret-down"></i><span>1.2</span></td>
    </tr>
  </tbody>
</table>

The nth-child is just in case you want to change certain td containers like color or width.

score 0 · Answer 4 · answered Jul 23 '15 at 18:41

The layout issue is due to your floated element (caret). If your page shrinks in width, then the columns of your HTML table will also shrink and may cause your elements to wrap onto two lines.

What I would do is wrap the caret and number in a div (HTML table) and in turn put the caret and number in a separate span (HTML table cell). The result is that the caret and the number will always be on a single line and you have some ability to control vertical alignment and spacing (using padding).

.tablecell {
  border: 1px dotted blue;
  display: table-cell;
}
.table {
  display: table;
  width: 100px; /* optional */
}
.table span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  width: 50%;
}
.table span.left {
  text-align: right;
  padding-right: 5px;
}
.table span.right {
  text-align: left;
  padding-left: 5px;
}

<div class="tablecell">
  <div class="inner table">
    <span class="left">x</span> 
    <span class="right">21</span>
  </div>
</div>

Properly align spacing between elements in a table cell

4 Answers4