Setting margins for individual cells in a CSS table

I am looking to create a table with a left floated cell, a right floated cell, and the middle cell to remain centered.

For example: https://i.sstatic.net/xXo59.png

Issue: As the content within the middle cell increases, it shifts further to the left, reducing the margin I want between the cells.

Example: https://i.sstatic.net/ElcOT.png

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'><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087d66617c6d6c7b7c697c">[email protected]</a></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

htmlcsshtml-table

Answer №1

Adding table-layout:fixed to your table will ensure the table layout remains fixed.

.layout {
  /*background: #636969;*/
  width: 750px;
  margin: 0 auto;
  padding: 1em;
}
.layout h4 {
  padding: 1em 0;
  letter-spacing: 1px;
  border-bottom: 1px solid #cacece;
}
.layout table {
  width: 100%;
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 200;
  table-layout: fixed;
}
.layout tr {
  border-bottom: 1px solid #cacece;
}
.layout td {
  padding: 0.5em 0;
}
.layout .edit {
  text-align: right;
}
<div class='layout'>
  <h4>Table Layout</h4>
  <table class='options'>
    <tr>
      <td class='name category'>Category</td>
      <td class='value'>Technology</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name price'>Price</td>
      <td class='value'>$99.99</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name quantity' colspan='2'>Quantity</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
  </table>
</div>

Answer №2

To ensure consistency, try establishing a specific width for the initial column:

.name { width: 100px; }

For reference, visit: https://jsfiddle.net/dojprwzL/

Answer №3

To align the content in your edit column to the right, you can use this CSS code:

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

In order to apply the same alignment rule to your other columns, simply change right to either left or center. Your updated styling would look like this:

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

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

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

For a visual representation of how this works, check out the live example here.

Answer №4

To set the table layout to fixed, use

.settings table{table-layout:fixed;}

Alternatively, you can specify the width of each cell using percentages:

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

View the Updated Fiddle for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding elements to a JavaScript array from within a PHP loop

I'm working with a php loop that is outputting geolocation values. I want to save these values in a javascript array so that I can use them to plot points on an HTML5 canvas. How can I achieve this? Here is the php loop: <ul id = "geo-list"> ...

phpjavascriptarrayshtmlcanvas

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

htmlcssinternet-explorer

CSS for button positioning inspired by game controller layout, built to be responsive

Is there a way to arrange these 4 buttons in a layout resembling a game controller? Currently, they are displayed like this and I want them to be centered at the bottom of the screen, smaller, and responsive. What changes should I make? Would using #contro ...

htmlcssbuttonresponsive-designresponsive

Customize scaffolding.less for the body element

Recently, I've been putting together a webpage and decided to incorporate Bootstrap into the design. However, after adding Bootstrap, I noticed that it changed the background color of the body on my site. I have included a link to the fiddle below for ...

jqueryhtmlcsstwitter-bootstrap

show data in a table that has additional margin at the top

I attempted to create a component similar to the input-group in bootstrap. I opted not to use the default input-group class of bootstrap because it doesn't allow for adding multiple buttons and input elements in the input group addon. Therefore, I dec ...

csstwitter-bootstrap-3

Determining the exact pixel height of a table row

Is there a way to use JavaScript to accurately determine the height of a table row in pixels? Specifically, I am looking for the measurement from the top of one green border to the top of the next green border. I have tried using jQuery's .height(), ...

javascriptjqueryhtmlcss

I'm having trouble figuring out how to activate the active state for a navigation bar

Having trouble changing the icons' state when they are clicked on. This navigation bar is being imported from different files. Here is my code for the navigation bar: .nav { position: fixed; top: 88%; left: 12.5%; right: 12.5%; width: 7 ...

htmlcss

Limit Range of jQuery UI Slider Button

How can I modify the jQuery UI slider range to keep the button within the slider div and prevent it from overlapping as shown in the screenshots below? https://i.sstatic.net/odG3o.png https://i.sstatic.net/aiGxr.png ...

javascriptjquerycssuser-interfaceslider

AngularJS input field filters failing to function properly

I've successfully implemented practically all filter types in this Fiddle: <div data-ng-app='' data-ng-init="vehicles=[ {type:'car',color:'red'}, {type:'bike',color:&a ...

javascriptarraysangularjshtml

Can using .wrap( ) negate the styling effects of the wrapper?

I am struggling with centering a button on my webpage. Currently, I have the following code for creating the button: var button = ($('<button>', { "id": "jspsych-free-sort-done-btn", "class": "jspsych-free-sort", ...

jqueryhtmlcsstext-align

The nightmare of Parent-Child Inheritance in JQuery/CSS is a constant struggle

Having difficulty implementing specific JQuery effects into a Bootstrap framework due to its extensive CSS causing issues. Created a test file named testjquery.html connected to a stylesheet defining a hidden element and activating the fade in of this ele ...

javascriptjqueryhtmlcsstwitter-bootstrap

Content remains connected to the left side of the webpage in a single column, adapting to different screen sizes

Can someone help me with this issue: RWD I have been struggling to center these elements in a single column when the screen size is less than 960px. I have tried using margin: 0 auto; but it doesn't seem to be working. Any suggestions? ...

htmlcss

Issue with scrolling feature in div

I am currently facing an issue with scrolling on my website. Visit this site to see the problem. When scrolling down, it causes the "hidden" part of the site to slide up. I want to achieve a similar sliding effect, but it needs to be smooth. I have attempt ...

javascriptjqueryhtmlcss

How can you identify if JavaScript is turned off without relying on the noscript tag?

While working on designing a pop-up notification for cases when JavaScript is disabled, I incorporated html, css, and bootstrap elements into my project. An issue arose as I pondered if there exists a method to identify whether the html class within my p ...

javascripthtmlpopupnoscript

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

csstwitter-bootstraphtml

RobotFramework: Find elements using the same class identifier

I am currently tackling a challenge with test automation using robotframework and the seleniumlibrary. The issue I am facing is that I am unable to locate the correct element due to there being two elements with identical classes. These elements are part o ...

htmlseleniumselenium-chromedriverrobotframework

Incorporated video content directly onto my website

Can anyone provide guidance on how to embed a video from the following site? I attempted to copy the link in view source mode, but the video address seems to change after a certain period of time. Would greatly appreciate any assistance with this issue. ...

htmlvideoembed

Strip all textual content from within HTML div elements while retaining the original HTML tags and formatting

I currently have the following HTML code: <div> Here <a href="#"> is </a> <p> Text, that I want to </p> be removed </div> This is what I desire: <div> <a href="#"> </a> <p& ...

javascriptjqueryhtmldom

Modifying form data when submitting a form

Is there a common or widely-used method for modifying or adding form values before they are serialized and sent to the server upon form submission? I'm looking for a way to change or add these values without having to recreate them. I've come ac ...

javascriptjqueryhtml

Implement transition effect on collapsible div with styled-components in React

I am attempting to develop a straightforward collapsible div using styled-components within a react project. While I have successfully managed to toggle the div's open and close state based on certain conditions, I am facing difficulties in implement ...

cssreactjsstyled-components