What are the steps to shift columns to the left within a table?

Question

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them.

Currently, it appears like this:

My desired outcome is something similar to:

CSS Code:

.table {
    width:100%;
}

.table table{
    border-collapse: collapse;
    width:100%;
}

.table td{
    padding-left: 5px;
    color: #000000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 6px;
    font-family: Arial,Helvetica,sans-serif;
}

.table tr:nth-child(odd){ background-color:#EFEFEF; }
.table tr:nth-child(even)    { background-color:#ffffff; }

.table tr:first-child td{
    padding-left: 5px;
    background-color:#EFEFEF;
    text-align:left;
    color:#868686;
    font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 16px;
    margin-bottom: 6px;
}

/* Border line in the middle (first-child) Example: 1 | 2 | 3 */
.table tr:first-child td:not(:last-child) { border-right: 1px solid #868686;}

HTML:

<div class="table" >
    <table>
        <tr>
             <td>
               ID#
             </td>
             <td>
               Name
             </td>
             <td>
               Edit
             </td>
              <td>
               Delete
             </td>
       </tr>
       
<tr><td><?php echo $tags_id ?></td><td><?php echo $name ?></td> <td><?php echo "<a href='edit.php?id=$tags_id'>Edit</a>"; ?></td> <td><?php echo "<a href='delete.php?id=$tags_id'>Delete</a>"; ?></td></tr>

       </table>
</div>

html css

Answer 1

Answer №1

It is important to consider the version of HTML you are using when adjusting column widths in tables. One method that can work across various versions is to include a <colgroup> as the first child of your table element:

<table>
  <colgroup>
    <col width="20em"/>
    <col width="10em"/>
    <col width="10em"/>
  </colgroup>
</table>

By setting specific widths for each column, you can ensure consistency in the display of your table. If this approach does not yield the desired results, you may also try setting a width attribute on the <table> itself and using percentages in the <col/> widths:

<table width="40%">
  <colgroup>
    <col width="50%"/>
    <col width="25%"/>
    <col width="25%"/>
  </colgroup>
</table>

Answer 2

It is important to consider the version of HTML you are using when adjusting column widths in tables. One method that can work across various versions is to include a <colgroup> as the first child of your table element:

<table>
  <colgroup>
    <col width="20em"/>
    <col width="10em"/>
    <col width="10em"/>
  </colgroup>
</table>

By setting specific widths for each column, you can ensure consistency in the display of your table. If this approach does not yield the desired results, you may also try setting a width attribute on the <table> itself and using percentages in the <col/> widths:

<table width="40%">
  <colgroup>
    <col width="50%"/>
    <col width="25%"/>
    <col width="25%"/>
  </colgroup>
</table>

Answer 3

Answer №2

By setting the width:100% on your table, you are essentially making all the columns span across the entire available width. You can therefore consider removing this from your table code.

Take a look at this JS Fiddle demo for reference.

Answer 4

By setting the width:100% on your table, you are essentially making all the columns span across the entire available width. You can therefore consider removing this from your table code.

Take a look at this JS Fiddle demo for reference.

Answer 5

Answer №3

Check out this example: Demo

.custom-table {
    width:100%;
}
.custom-table table {
    border-collapse: collapse;
    width:100%;
}
.custom-table tr {
    clear:both;
}
.custom-table tbody td, .custom-table th {
    display:inline;
    width:auto;
    text-align:left;
    padding: 1px 10px;
    color: #000000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
}
.custom-table tbody tr:nth-child(odd) {
    background-color:#ffffff;
}
.custom-table tbody tr:nth-child(even) {
    background-color:#EFEFEF;
}
.custom-table thead tr {
    background-color:#EFEFEF;
}
.custom-table thead tr th {
    color:#868686;
    border-right: 1px solid #868686;
}

HTML:

<div class="custom-table">
    <table>
        <thead>
            <tr>
                <th>ID#</th>
                <th>Name</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </tbody>
    </table>
</div>

I hope you find this useful!

Answer 6

Check out this example: Demo

.custom-table {
    width:100%;
}
.custom-table table {
    border-collapse: collapse;
    width:100%;
}
.custom-table tr {
    clear:both;
}
.custom-table tbody td, .custom-table th {
    display:inline;
    width:auto;
    text-align:left;
    padding: 1px 10px;
    color: #000000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
}
.custom-table tbody tr:nth-child(odd) {
    background-color:#ffffff;
}
.custom-table tbody tr:nth-child(even) {
    background-color:#EFEFEF;
}
.custom-table thead tr {
    background-color:#EFEFEF;
}
.custom-table thead tr th {
    color:#868686;
    border-right: 1px solid #868686;
}

HTML:

<div class="custom-table">
    <table>
        <thead>
            <tr>
                <th>ID#</th>
                <th>Name</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </tbody>
    </table>
</div>

I hope you find this useful!

Answer 7

Answer №4

.table {
    width:50%;
}

This solution should address the issue at hand. Feel free to view the demonstration on jsfiddle.

http://jsfiddle.net/xzzcrouf/3/. You can also experiment with this alternative for improved styling - http://jsfiddle.net/xzzcrouf/4/

Answer 8

.table {
    width:50%;
}

This solution should address the issue at hand. Feel free to view the demonstration on jsfiddle.

http://jsfiddle.net/xzzcrouf/3/. You can also experiment with this alternative for improved styling - http://jsfiddle.net/xzzcrouf/4/

Answer 9

Answer №5

I decided to take out the width:100% property from my CSS table.

HTML:

<div class="table" >
    <table>
        <colgroup>
            <col style="width:50px">
            <col style="width:250px">
            <col style="width:180px">
            <col style="width:1500px">
        </colgroup>
        <tr>
            <td>ID#</td>
            <td>Name</td>
            <td>Edit</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>1</td>
            <td>NAME</td> 
            <td>EDIT</td> 
            <td>DELETE</td>
        </tr>
    </table>
</div>

Check out the Js Fiddle Demo here!

Although there may be other methods, this setup is exactly how I envisioned it.

Big thank you to @pgoetz for educating me on the usefulness of colgroup.

Answer 10

I decided to take out the width:100% property from my CSS table.

HTML:

<div class="table" >
    <table>
        <colgroup>
            <col style="width:50px">
            <col style="width:250px">
            <col style="width:180px">
            <col style="width:1500px">
        </colgroup>
        <tr>
            <td>ID#</td>
            <td>Name</td>
            <td>Edit</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>1</td>
            <td>NAME</td> 
            <td>EDIT</td> 
            <td>DELETE</td>
        </tr>
    </table>
</div>

Check out the Js Fiddle Demo here!

Although there may be other methods, this setup is exactly how I envisioned it.

Big thank you to @pgoetz for educating me on the usefulness of colgroup.

What are the steps to shift columns to the left within a table?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the complete pathway in CSS?

What is the best way to adjust inline svg to the user viewport size?

What is the process for choosing the 1st, 4th, 7th element, and beyond?

Using DIV to "enclose" all the elements inside

Control your thumbnails with the powerful iDangerous Swiper feature

Wordpress Issues with Displaying Arabic Text Correctly

table: column with percentage-based width AND a minimum width in pixels

Displaying postcode on a category page: A step-by-step guide

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

What steps should I take to ensure a local HTML page retains the current section that is hidden open whenever it is reloaded?

extracting information with beautifulsoup

Access a designated tab within a CSS-designed tab system

Emulate a link click using key input

Locate a JQuery element within another JQuery element

Displaying the active navigation element in ApyCom JavaScript jQuery menu: tips and tricks

Methods for showing Internet Explorer not supported in Angular without needing to import polyfills

Aligning the text in the middle of a button

How can I trigger a function by clicking on a link that was generated dynamically with jQuery?

Ways to obtain jquery object for replaced DOM element

Adding an image within the body of text in a Django model, where both the text and image coexist