CODEWITHSUNDEEP
htmlcsshtml-table
Robert
Robert

Reputation: 10390

CSS Table margin for cell

I want to have a table that has the layout of a left floated cell a right floated cell and the middle cell to stay in the center.

Example: enter image description here

Problem: When the data inside the middle cell increases it moves more to the left thus decreasing the margin I want between the cells.

Example: enter image description here

Code:

.settings {
  /*background: #636969;*/
  width: 750px;
  margin: 0 auto;
  padding: 1em;
}
.settings h4 {
  padding: 1em 0;
  letter-spacing: 1px;
  border-bottom: 1px solid #cacece;
}
.settings table {
  width: 100%;
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 200;
}
.settings tr {
  border-bottom: 1px solid #cacece;
}
.settings td {
  padding: 0.5em 0;
}
.settings .edit {
  text-align: right;
}
<!-- start settings -->
<div class='settings'>
  <h4>Account Settings</h4>
  <table class='options'>
    <tr>
      <td class='name username'>Name</td>
      <td class='value'>Robert Rocha</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name email'>Email</td>
      <td class='value'>[email protected]</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name pword' colspan='2'>Password</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
  </table>
</div>
<!-- end settings -->

Fiddle

Upvotes: 1

Views: 136

Answers (4)

Rayudu
Rayudu

Reputation: 1816

Use

.settings table{table-layout:fixed;}

or You can use width of each cell in percentages like 

        .settings td{word-wrap: break-word;}        
        td:first-child{width:30%;}
        td:nth-child(2){width:40%;}
        td:last-child{width:30%;}

Check Updated Fiddle

Upvotes: 0

Aer0
Aer0

Reputation: 3907

You've already done it for your edit column by doing so:

.settings .edit {
  text-align: right;
}

This puts the content in your edit column straight to the right hand side. What you need to do is just to add the same rule for your other columns, obviously replacing right through left and center. That being said your styling would look somehow like this:

.settings .name {
  text-align: left;
}

.settings .value {
  text-align: center;
}

.settings .edit {
  text-align: right;
}

A live example can be seen here.

Upvotes: 0

Johannes
Johannes

Reputation: 67776

you can set a fixed width for the first column:

.name { width: 100px; }

see here: https://jsfiddle.net/dojprwzL/

Upvotes: 0

dippas
dippas

Reputation: 60563

simply add table-layout:fixed to your table

.settings {
  /*background: #636969;*/
  width: 750px;
  margin: 0 auto;
  padding: 1em;
}
.settings h4 {
  padding: 1em 0;
  letter-spacing: 1px;
  border-bottom: 1px solid #cacece;
}
.settings table {
  width: 100%;
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 200;
  table-layout: fixed;
}
.settings tr {
  border-bottom: 1px solid #cacece;
}
.settings td {
  padding: 0.5em 0;
}
.settings .edit {
  text-align: right;
}
<div class='settings'>
  <h4>Account Settings</h4>
  <table class='options'>
    <tr>
      <td class='name username'>Name</td>
      <td class='value'>Robert Rocha</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name email'>Email</td>
      <td class='value'>[email protected]</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name pword' colspan='2'>Password</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions