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:

https://i.sstatic.net/F7Rqk.png

My desired outcome is something similar to:

https://i.sstatic.net/ALKa9.png

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>
htmlcss

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

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 №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 №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.

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

Having trouble getting padding to work inside a pre block, even when using a wrapper div?

Snippet of HTML Code: <div class="prewrap"> <pre> stepsize = .01 samplestimes = 30 universex = seq(-1, 1, stepsize) universey = sin(pi * universex) </pre> </div> Sample CSS Styles: #prewrap { background-color: #e3e3e3; pa ...

htmlcssweb

Troubleshooting: Issue with fixed positioning in React (Next.js) causing problems with modal window functionality

I'm currently working on implementing a modal window in React, but I've encountered an issue where setting position: fixed results in the modal window's position being relative to the page rather than the browser window. For privacy reasons, ...

javascripthtmlcssreactjsnext.js

Transfer information from a server to a client using the fetch API in pure JavaScript

Hey there, I've been working on a mini app that sends a fetch request to the backend and expects some information in return when a button is clicked. However, I'm facing an issue where the fetch call seems successful with a 200 status, but the d ...

javascripthtmlnode.jsdatabase

Is there a way to determine the location where my website is fetching CSS and media files from?

After implementing Wagtail on my website, I encountered an issue with the CSS and images not being found when the site was put into production. I have already tried running python manage.py collectstatic and ensured that all of my CSS files are located in ...

csspython-3.xwagtail

JQuery form not triggering the submit event

Currently, I am facing some issues with my code while trying to trigger on submit event on a form and validate it. The main problems I encountered are that the onsubmit event is not being triggered, and the input field of type email is not validated proper ...

javascriptjqueryhtmlbootstrap-modal

Checking for the Existence of a Class Element within a String using JavaScript

Within my web project, there is a scenario where if a user has been logged out in one browser tab, they will automatically be redirected to the login page in any other browser tab after interacting with that page (such as clicking on a link). However, this ...

javascriptjqueryhtmlajax

Adjusting variables in Bootstrap using the app.scss file is a helpful customization technique for

As I work on a template that will be utilized by various individuals across different projects, ensuring it functions seamlessly without the need for project-specific modifications is paramount. In this particular case, my goal is to modify the $spacer va ...

csstwitter-bootstrapsassbootstrap-5

Styling is applied by Bootstrap to inputs in a form that are not required

I am currently working on validating a form for empty fields using Bootstrap. When submitting and validating the form with the form.checkValidity() method, I noticed that even the non-required fields are being styled as if they are required. Is this normal ...

javascripthtmlbootstrap-4

What are the implications of using subresource integrity with images and other types of media

Subresource integrity is a fantastic method for securely using third-party controlled HTTP-served resources. However, the specification currently only covers the HTMLLinkElement and HTMLScriptElement interfaces: NOTE A future iteration of this spec may i ...

htmlimagehttpsw3csubresource-integrity

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...

javahtmlmysqljsp

What is the process of compiling HTML code?

In controller, I bind the same data like $scope.name = "<div>geetha teko</div>", this name will now be bound to the HTML like {{name}}. When I view it in the browser, it prints as "<div>geetha tek0</div>". Is there a way to only di ...

javascripthtmlangularjs

The functionality of a div element appears to be impaired when attempting to include a newline character

I have a div element <div id="testResult" style="padding-left: 120px;"> My goal is to include text with newline character '\n' inside the div. However, when I view my html page, the text does not respect the newline character. $( ...

javascriptjqueryhtmlcss

What is the best way to retrieve a particular value from a database using PHP?

$sql="Select chanceNo From gm_gacha_token1 where token_code='$mytoken'"; $result=mysql_query($sql); $count=mysql_num_rows($result); Language: PHP I am attempting to retrieve a single value of `chanceNo. Is there a way to get this value and stor ...

phphtmlmysql

When using Angular 8 with RxJs, triggering API calls on click events will automatically detach if the API server is offline

I have an Angular 8 application with a form containing a save button that triggers a call to a Spring Boot microservice using RxJs. I decided to test what would happen if the Rest API server were down. When the Rest API is running, clicking the button wor ...

htmlangularspring-bootrxjs

Ways to ensure a form label is accessible via keyboard navigation

My HTML5 form collects user information and processes it upon submission. With the help of the jQuery Validation Plugin, input validation is performed. In case of errors, an error-message-container div is displayed at the top of the screen, listing all err ...

jqueryhtmlaccessibility

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

Within my Angular project, I have stored a few static html files (specifically sampleText.html) in the src/assets/html folder. In one of my components, I am attempting to fetch and display this file. The following code is being used for this purpose. Every ...

javascripthtmlangular

Locking Bootstrap 4.3 Navbar at the Page's Summit with a See-Through Effect

I have extensively researched and searched online for information before reaching out here. I hope my question is not redundant. My challenge lies in creating a static navbar at the top of my Bootstrap 4.3 page. Despite multiple attempts, it seems to elud ...

htmlcssbootstrap-4staticnavbar

Tips for Controlling an Absent Search Bar in the HTML Source Code with Selenium

I'm attempting to automate searches using Selenium in Java. Upon inspecting the search bar on the page, I noticed that it has an id of searchBox and a name of q, which could be helpful. However, these properties are not visible in the HTML when viewi ...

javahtmlseleniumselenium-webdriver

Populating container with video element

I have divided my page into 4 quadrants using viewheight and percentage widths, which has been successful. Now, I want to insert a video in each div that can responsively fill its parent div. When I assign width: 100% to the video, it causes some alignmen ...

csshtml5-video

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

htmlcssmenu