Adjust the table to line up perfectly, center the content within the table cell (td), and align the

I'm currently working on aligning a table by centering the td elements and left justifying the text inside them.

My initial attempt was to use flex for center alignment, which worked to some extent but I couldn't get the left alignment right.

I came across a solution that involved using padding-left: 50%, but it didn't meet my requirements.

table {
    color: #212121;
    font-size: .875rem;
    margin: 1.25rem 0; 
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    border: 1px solid red;
}


tr {
    display:flex;   
    width: 100%;
    justify-content: center;
}

tr td { 
    max-width: 50%;
    text-align:left;
    border: 1px solid blue;
}
<table>
  <tbody>
    <tr>
      <td>lorem ipsum</td>
      <td>alpha</td>
     </tr> 
     <tr>
      <td>lorem ipsum ipsum</td>
      <td>teata ipsum alpha</td>
     </tr>                
   </tbody>
</table>

What I aim to achieve:

The borders are included purely for reference in terms of spacing.

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

css

Answer №1

One way to incorporate a span tag within a table in HTML is as follows:


<table>
      <tbody>
        <tr>
          <td><span>lorem ipsum</span></td>
          <td><span>alpha</span></td>
         </tr> 
         <tr>
          <td><span>lorem ipsum ipsum</span></td>
          <td><span>teata ipsum alpha
            teata ipsum alpha</span></td>
         </tr>                
       </tbody>
    </table>

Using CSS to style the table:


table {
    color: #212121;
    font-size: .875rem;
    margin: 1.25rem 0; 
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    border: 1px solid red;
}


tr {
    display:flex;   
    justify-content: center;
    text-align:center;

}
tr td{
    border: 1px solid blue;
    width:50%;

}
tr td span{ 
   display:inline-block; 
   width:50%;  
   text-align:left; 
    white-space:break;
}

You can view the result of this code here.

Answer №2

Check out this JsFiddle link

tr {
    display:flex;   
    width: 50%;
    margin: 0 auto;
    justify-content: center;
}

tr td { 
   max-width: 50%;
   text-align:left;
   border: 1px solid blue;
   width: 100%
}

To achieve a desired output, add width: 50%; margin: 0 auto; to the tr element and include width: 100% for tr td. This will center the content within the table cells while aligning the text to the left.

As a result, the table cells will be centered within the table and the text inside the cells will be aligned to the left.

Answer №3

One way to address this issue is by adjusting the border spacing.

table {
    color: #212121;
    font-size: 0.875rem;
    margin: 1.25rem 0;
    border-collapse: separate;
    table-layout: fixed;
    width: 100%;
    border: 1px solid red;
    border-spacing: 5px 0;
}

td {
  padding: 10px 10px;
  border: 1px solid blue;
}
<table>
  <tbody>
    <tr>
      <td>lorem ipsum</td>
      <td>alpha</td>
     </tr> 
     <tr>
      <td>lorem ipsum ipsum</td>
      <td>teata ipsum alpha</td>
     </tr>                
   </tbody>
</table>

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

Create multiple buttons with uniform width by adjusting padding in CSS

I recently attempted to create buttons using CSS and padding. Here is the HTML code for the buttons: <link rel="stylesheet" type="text/css" href="css/style-login.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.0.3.css" /& ...

htmlcssbutton

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

cssangularflexboxangular-material

What is the best method for deleting an uploaded image from a box?

My code is quite lengthy, so I'll just showcase the JavaScript portion here. Here is a snippet of my JavaScript code: <script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view- ...

javascriptphpjqueryhtmlcss

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

javascriptjqueryhtmlcssmongodb

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...

javascriptjqueryhtmlcss

Upgrade the arrow accordion in bootstrap by incorporating images instead

I have implemented a Bootstrap accordion with a toggle arrow. Here is an example: http://jsfiddle.net/zessx/r6eaw/12/ My question is, if I want to change the arrow with an image, what do I need to edit? Or how can I implement it? This is the image I want ...

javascriptjqueryhtmlcsstwitter-bootstrap

Animating toggles with JQuery

I am attempting to create a toggle effect for my div using this jQuery script: $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}; }, function() { $("div").animate({left:'0px'}; }, }); ...

javascriptjqueryhtmlcss

The "Splash Screen Div" page displayed during transitions and page loading

Creating a "Splash Screen Div" for a loading page involves waiting until everything is loaded and then hiding or moving the div off screen. Below is an example: index.html <div id="loading-Div"> <div id="bear-Logo"> < ...

javascriptcsshtml

Tips for incorporating a CSS transition when closing a details tag:

After reviewing these two questions: How To Add CSS3 Transition With HTML5 details/summary tag reveal? How to make <'details'> drop down on mouse hover Here's a new question for you! Issue I am trying to create an animation when t ...

javascriptjqueryhtmlcsstransition

Tips for modifying the color of a specific section of the border within a table

.table { background: #fff; position: relative; bottom: 210px; width: 90%; border: 2px solid #fff; border-width: 30px; border-collapse: collapse; } .table-year-1 { font-size: 22px; width: 2%; padding-top: 3px; ...

htmlcss

Turn off HTML5 Audio

There are 4 <audio> elements on a webpage. The client has asked for them to be available sequentially. Meaning, the first audio should play, then the rest should remain disabled until the first one finishes, and so on. In addition, they want the au ...

javascriptjquerycsshtmlaudio

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

javascriptcssgoogle-maps

Angular is not properly integrating Bootstrap features

I've been attempting to create bootstrap accordion items, but unfortunately they're not functioning correctly as shown in the Bootstrap documentation or YouTube tutorials. In my angular.json file, I have included both bootstrap and jQuery for te ...

cssangularnode-modulesbootstrap-5

What is the best way to split an input field into distinct fields for display on the screen?

Take a look at this image: https://i.stack.imgur.com/LoVqe.png I am interested in creating a design similar to the one shown in the image, where a 4 digit one-time password (OTP) is entered by the user. Currently, I have achieved this by using 4 separate ...

javascripthtmlcsstwitter-bootstrap

Is there a way to add a gradient of colors to the background?

I'm looking for instructions on how to achieve a multi-color background screen similar to the image I have provided. Can anyone help with this? ...

css

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

jquerycssoffset

When elements are arranged side by side without using floats, the alignment at the top is not correct

I am having trouble aligning multiple divs next to each other using inline-flex. They are not lining up properly on top (refer to the screenshot). Interestingly, if I remove the svg, the divs align correctly. ...

htmlcsscss-position

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

The tab content refuses to show up in its designated fixed location

I've been working on creating a responsive tab system that functions as an accordion on smaller mobile devices, inspired by this example. I've made great progress and I'm almost where I want to be, but for some reason, the active tab content ...

htmlcsstabsaccordion

Avoid placing the label within a form-inline in Bootstrap to maintain proper formatting and alignment

I am working on a form where I have two fields inline within a form-inline div. I am looking to move the labels of these fields above them rather than next to them. How can I achieve this without affecting the layout of the fields? Here is a CodePen link ...

htmlcssbootstrap-4