What could be causing my table column to not align to the left?

I'm currently utilizing Bootstrap and encountering an issue with aligning my "title" column in a table to the left. I've tried adjusting it but it doesn't seem to work as expected. Any suggestions on what might be missing here?

table td {
  text-align: left;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Date </th>
        <th>Time (IST)</th>
        <th>Title</th>
        <th>Speaker</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dec 17</td>
        <td>13:00 pm to 14:00 pm</td>
        <td>intro</td>
        <td>me</td>
      </tr>
      <tr>
        <td>Dec 17</td>
        <td>14:00 pm to 16:00 pm</td>
        <td>main topic</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

In the end, I might need some columns left-aligned and others right-aligned. Here is an example URL for reference:

csstwitter-bootstrap

Answer №1

There isn't a simple solution to address this issue. Since you have two separate tables, the column widths in one table may not correspond to those in the other.

In this scenario, considering the type of content that will be inserted into the tables (such as a date, time, title, and speaker), it's advisable to manually set the column widths yourself.

  1. Assign a class schedule-table to the relevant tables.
  2. Include a colgroup for each table:
<table class="table schedule-table">
    <colgroup>
        <col></col>
        <col></col>
        <col></col>
        <col></col>
    </colgroup>
    <thead>
    ...
  1. Determine the (relative) column widths using CSS:
.schedule-table colgroup col:nth-of-type(1){
    width: 10%;
}
.schedule-table colgroup col:nth-of-type(2){
    width: 30%;
}
.schedule-table colgroup col:nth-of-type(3){
    width: 40%;
}
.schedule-table colgroup col:nth-of-type(4){
    width: 20%;
}
  1. Adjust the cell's CSS to enable text wrapping if it exceeds the cell size.
.schedule-table td {
    white-space:normal !important;
}

Check out this demonstration

Answer №2

When using Bootstrap, the table class automatically sets the width to 100% with this code: .table {width:100%}

However, you can experiment by changing it to: .table {width:auto}

Answer №3

For those unsure of the data width, this solution involves using a single table and highlighting header rows to maintain consistency in appearance.

.schedule-table h4 { margin: 0px }
.bold { font-weight: bold }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="table-responsive">
    <table class="table schedule-table">
        <tbody>
            <tr>
                <td colspan="4" class="bg-info">
                    <h4>December 17, 2014 (Wednesday)</h4>
                </td>
            </tr>
            <tr class="bold">
                <td>Date</td>
                <td>Time (IST)</td>
                <td>Title</td>
                <td>Speaker</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>13:00 pm to 14:00 pm</td>
                <td>intro</td>
                <td>me</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>14:00 pm to 16:00 pm</td>
                <td>main topic</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="4" class="bg-info">
                    <h4>December 17, 2014 (Wednesday)</h4>
                </td>
            </tr>
            <tr class="bold">
                <td>Date</td>
                <td>Time (IST)</td>
                <td>Title</td>
                <td>Speaker</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>13:00 pm to 14:00 pm</td>
                <td>intro</td>
                <td>me</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>14:00 pm to 16:00 pm</td>
                <td>main topic</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

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

I am interested in modifying the color of the tick marks on the input[range] element

Seeking Slider Customization Help I am eager to learn how to create and personalize a slider using HTML. Although many resources offer guidance on customizing the slider itself, I have yet to come across any information on customizing the scale. For insta ...

htmlcssinput

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

javascriptcssangulartypescript

Is there a way to ensure that all elements on a page display properly across all screen resolutions without being cut off?

My website consists of three main elements: pictures, Cards (containing pictures and various typography), and Buttons. These elements are arranged in a column layout. The issue I am facing is that the pictures and buttons get cut off on the screen due to ...

cssreactjsflexboxmaterial-ui

Move buttons from one group to another group

I have a task to update a group of buttons with different buttons depending on the initial button chosen. Button1: when clicked, both buttons will be replaced by Button1a and Button1b Button2: when clicked, both buttons will be replaced by Button2a ...

javascripthtmlcss

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

javascriptcssreactjs

Ways to prevent body content from overlapping with footer content and appearing below

Currently, I am utilizing an autocomplete text box where the scroll bar exceeds based on dynamic values. However, if more values are displayed in the text box, the scroll bar automatically extends to exceed the footer of the page, resulting in two scroll b ...

jqueryhtmlcssautocompleteoverflow

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

It seems that when styling the <a> tag for the list in the footer, no changes occur even if correctly applying the style. However, adding padding to the form in the main part of the code causes the links in the footer to show the change. To see this ...

htmlcss

Placing the input-group-addon above the text-input for better positioning

Feeling overwhelmed trying to finalize a simple form due to CSS issues? Check out this image for a visual of the problem: https://i.stack.imgur.com/PgCmN.jpg The label is slightly off to the left, and the button appears larger than the input field. The i ...

htmlcsstwitter-bootstrap-3

Issues with Safari text shadow not rendering properly when extending beyond the element border

I've encountered a situation where I have a text shadow applied with the following CSS: body { background: white; } h1 { color: black; text-shadow: 100px 100px 10px black; } https://i.sstatic.net/j8OTS.png When viewing in Safari browser, t ...

csssafari

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag? <p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{ ...

javascriptcssangularjsng-class

Material React Card Lists

I am facing a simple problem. I want to create a list of cards from left to right. Currently, the card is centered and when I add another card, it appears below the existing ones. I want them to be arranged from left to right. Please check out the code ex ...

cssreactjsmaterial-uijss

An iframe for the Vimeo player set to 100% of

I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...

cssvue.jsvimeo-player

Is there a way to make the footer adapt to the varying heights of the grid sections as they grow in size?

Currently, I am facing an issue with the positioning of the page footer. Despite my efforts, it does not remain at the bottom as intended. Please refer to the image for a visual representation of the problem. How can this be rectified? It is worth noting ...

htmlcsstwitter-bootstrap-3

Issue with checkboxes preventing submission of form

Currently working on a website project for a company that requires certain steps to be completed for deliveries. Unfortunately, I am facing issues with the submit button, and I apologize as I am still new to this. The code I have pasted is divided into tw ...

javascriptphphtmlcss

Using the max-width property with Semantic UI Dropdown in ReactJS

I'm struggling to determine how to adjust the max-width of the Dropdown element in ReactJS. I attempted the following: .Menu Dropdown { max-width: 5rem !important; } Unfortunately, this did not work as expected. The dropdowns are taking up too m ...

javascriptcssreactjsdropdown

Steps for aligning an image in the center above two divs

I've been attempting to accomplish something without success. The image below should speak a thousand words. My goal is to position div 3, located in div 2, perfectly centered between div 1 and 2 to achieve the desired outcome: Here's my HTML a ...

htmlcss

Using jQuery, organize tables by the value of their td class

, I am attempting to organize various td elements within one or more trs based on their respective classes. These are all housed in multiple table elements with the classname "hosts". Currently, my jQuery abilities are lackluster and I am struggling to sor ...

jqueryhtmlcss

Tips for showcasing the latest Google Map InfoWindows above previous ones

I have a dynamic Google Map with InfoWindows being added dynamically, but I am facing an issue where overlapping InfoWindows do not always display the most recent one on top of older ones. Is there a way to ensure that the latest InfoWindow always shows u ...

javascriptjqueryhtmlcssgoogle-maps

The process of overriding CSS applied through JavaScript

I am using a third-party multi-select dropdown. Similar to Select2, the multi-select dropdown is created using JQuery with select2.min.js and the width of the dropdown is automatically calculated. Is there any way to apply static width to it, as I believe ...

javascripthtmljquerycss