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.

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

Ways to incorporate horizontal scrolling into a flex container within a Bootstrap navigation bar

I am encountering an issue with my Bootstrap navigation menu that uses a flex container (). The goal is to have horizontal scrolling for the menu items when they surpass the width of the container. I have implemented the following CSS style on the containe ...

htmlcssbootstrap-5

Enhancing the alignment of div elements

Our objective is to have two divs aligned next to each other. Here is the HTML code: <div class="test1>Text 1</div> <div class="test2>Text 2</div> And here is the CSS code: .test1 { float: left; } .test2 { float: left; } ...

csshtmlalignment

Using a video as a background in HTML

My code has an issue where I have set overflow: hidden in the CSS but the video is still not displaying below the text as intended. The relevant CSS snippets are: fullscreen-bg { top: 0; right: 0; bottom: 0; left: 0; overflow:hidden ...

htmlcss

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Striving to maintain the absolute positioning of the right column as users scroll through the left column has proven to be a challenging task. Despite exploring various solutions from stackoverflow and google, none seem to effectively address this issue. ...

htmlcsstwitter-bootstrapreactjs

identify external components based on their internal identifiers

Can we target an external element based on its descendant elements? This question arises from the need to apply one stylesheet to two different dynamic pages within the same wrapper. Page 1 <div id="api"> <div class="a"></div> </div ...

csscss-selectors

Why is my <a> element not functioning properly?

I'm encountering a small issue with my first HTML website. The hyperlinks in the "about me" section are not clickable, yet those in the drop down menu are functioning properly. Any thoughts on why this might be happening? If you'd like to take a ...

htmlcss

Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

I am struggling with the alignment of a login page form that needs to be centered both horizontally and vertically, while allowing for slight scrolling down to accommodate the navigation bar height. I have attempted to adjust the classes and style height ...

htmlcssforms

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascripthtmlcssangularjs

Is there a way to align the image to the left within the div contained in my header section?

I am facing an issue with positioning the logo in the header section of my website. It appears correctly on the left side for tablet and mobile versions, but on desktop, it does not align to the corner as desired. I tried adding a right margin, but I belie ...

htmlcssimageheaderpositioning

Tips for mastering web design techniques

As a budding Web Designer, I am eager to absorb the most efficient techniques utilized in the world of web design. Can anyone recommend some tutorials for mastering the creation of innovative websites using Photoshop, CSS, HTML, and more? ...

jqueryhtmlcssphotoshop

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

javascripthtmljquerycss

indicating the vertical size of a paragraph

Is there a way to set the specific height for the <p> tag? ...

htmlcss

Utilizing the optimal method for aligning text to either the right or left side

I am currently working on creating a container element with multiple child elements. I would like these elements to be aligned differently, some left-aligned and others right-aligned. This includes scenarios where the child elements themselves are containe ...

htmlcss

The CSS background and background-image are visible exclusively on the Chrome desktop browser

Why is the background image not showing up on my website? The img src is also not displaying. All pictures show up fine on Chrome desktop browser, but not on Chrome mobile browser. Other browsers that are not displaying the images include Safari mobile, I ...

htmlcss

Alignment of content layout across two wrapper elements

My goal is to achieve a specific layout where each pair of cards in a two-column layout is aligned based on the card with the largest content. Both cards share the same content layout and CSS. If you have any ideas or implementations that could help me ac ...

javascriptcssreactjssass

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

javascripthtmlcssskrollrslicknav

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

Having trouble displaying one DIV above another DIV

I'm having trouble getting an image in a DIV to display above text in another DIV. I can't figure out why it's only displaying below. <div> <div style='z-index: 99; width: 160px; height: 120px; box-shadow: 0px 0px 16px 0px r ...

css

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Here is some code I want to modify: https://i.stack.imgur.com/0C61Y.png I would like to add an arrow element at the top, similar to this: https://i.stack.imgur.com/pDT3s.png This will give it a popup-like appearance. Below is the CSS styling for the co ...

htmlcss

Vue unable to load material icons

The icons npm package "material-icons" version "^0.3.1" has been successfully installed. "material-icons": "^0.3.1" The icons have been imported as shown below. <style lang="sass"> $material-icons-font-path: '~material-icons/iconfont/'; ...

cssvue.jssassvuejs2google-material-icons