Struggling with CSS Styling - Unable to align text in the middle of a table

.transfers table{
  width: 650px;
  margin: 450px auto;
  border-collapse: collapse;
}

.transfers tr{
  border-bottom: 1px solid #cbcbcb;
}

.transfers th{
  font-family: "Montserrat", sans-serif;
}

.transfers th, td{
  border: none;
  height: 30px;
  padding: 3px;
  font-size: 20px;
}

.transfers .id{
  text-align: left;
}

.transfers .date{
  text-align: center;
}

.transfers .amount{
  text-align: right;
}
<div class="transfers">
        <table>
            <thead>
                <tr>
                    <th class="id">ID</th>
                    <th class="date">Date</th>
                    <th class="amount">Amount</th>
                </tr>
            </thead>

            <tbody>
                        <tr>
                        <td style='background-color: blue'>211</td>;
                        <td class='date' style='background-color: blue'>2022-03-29</td>;
                        <td class='amount' style='background-color: blue'>IN: £4.00</td>;
                        </tr>;
            </tbody>
        </table>
    </div>
</body>

I am attempting to position the ID on the left side, the date in the center, and the amount on the right side:

Nevertheless, when utilizing the CSS code provided above, there is a significant gap between "Date" and "Amount," causing the date not to be perfectly centered.

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

htmlcss

Answer №1

Adjust all column widths to be the same.

.transfers table {
  width: 650px;
  margin: 0px auto;
  border-collapse: collapse;
}

.transfers tr {
  border-bottom: 1px solid #cbcbcb;
}

.transfers th {
  font-family: "Montserrat", sans-serif;
}

.transfers th, td {
  text-align: center;
  /* border: none; */
  height: 30px;
  padding: 3px;
  font-size: 20px;
  width: 30%;
}

.transfers .id {
  text-align: left;
}

.transfers .date{
 
}

.transfers .amount{
  text-align: right;
}
    <div class="transfers">
        <table border>
            <thead>
                <tr>
                    <th class="id">ID</th>
                    <th class="date">Date</th>
                    <th class="amount">Amount</th>
                </tr>
            </thead>

            <tbody>                
              <tr>
                <td class="id">211</td>
                <td class='date' >2022-03-29</td>
                <td class='amount' >IN: £4.00</td>
              </tr>                  
              <tr>
                <td class="id">211</td>
                <td class='date' >2022-03-29</td>
                <td class='amount' >IN: £4.00</td>
              </tr>                     
            </tbody>
        </table>
    </div>

Answer №2

The issue is not with the table being off-center. The problem lies in your columns having uneven widths. To address this, you can specify a width for the widest column or adjust all column widths to evenly distribute the space.

.transfers table{
  width: 650px;
  margin: 450px auto;
}

.transfers .id{
  text-align: center;
  width: 33.333333%;
}

.transfers .date {
  text-align: center;
  width: 33.333333%;
}

.transfers .amount {
  text-align: right;
  width: 33.333333%;
}
<div class="transfers">
<table>
    <thead>
        <tr>
            <th class="id">ID</th>
            <th class="date">Date</th>
            <th class="amount">Amount</th>
        </tr>
    </thead>

    <tbody>
        <tr>
        <td style='background-color: blue'>211</td>;
        <td class='date' style='background-color: blue'>2022-03-29</td>;
        <td class='amount' style='background-color: blue'>IN: £4.00</td>;
        </tr>;
    </tbody>
</table>
</div>

For additional guidance, refer to Creating 3 Perfectly Equal Columns that take up 100% on the Browser Window Width.

Answer №3

.transfers table{
  width: 651px;
  margin: 450px auto;
  border-collapse: collapse;
}

.transfers tr{
  border-bottom: 1px solid #cbcbcb;
}

.transfers th{
  font-family: "Montserrat", sans-serif;
}

.transfers th, td{
  border: none;
  height: 30px;
  padding: 3px;
  font-size: 20px;
}

.transfers .id{
  text-align: left;
}

.transfers .date{
  text-align: center;
}

.transfers .amount{
  text-align: right;
}
td{width:217px;}
<div class="transfers">
        <table>
            <thead>
                <tr>
                    <th class="id">ID</th>
                    <th class="date">Date</th>
                    <th class="amount">Amount</th>
                </tr>
            </thead>

            <tbody>
                        <tr>
                        <td style='background-color: blue'>211</td>;
                        <td class='date' style='background-color: blue'>2022-03-29</td>;
                        <td class='amount' style='background-color: blue'>IN: £4.00</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

React-slick slider not functioning properly when using TypeScript

I encountered an issue while trying to implement a carousel/slider using the typescript version of the react-slick library in my Nextjs project. After importing the Slider component from the package, I received the following error: https://i.sstatic.net/6 ...

javascriptcssreactjstypescriptcarousel

What steps do I need to take in order for my web controls to show up on top of an activex

I'm currently facing a challenge in designing a website with activex reports. Even though I recommended switching to another reporting tool or technology, we're still using activex for now. I've noticed that graphical activex objects displa ...

htmlactivexz-index

Seeking assistance with setting up BxSlider installation

I'm struggling with adding bxslider to my HTML template. No matter what I try, the slider doesn't work as expected. When I preview my website, all three images are displayed together in a single column. Can someone please guide me on how to fix t ...

javascriptjqueryhtmlcss

Displaying a random div using javascript

Seeking a way to display random divs on my webpage, I came across a stackoverflow solution: Showing random divs using Jquery The recommended code can be found here: http://jsfiddle.net/nick_craver/RJMhT/ Despite following the provided instructions, I am ...

javascripthtml

Assigning a value to data-ng-model in JavaScript

I am facing a challenge in setting the data-ng-model attribute of an HTML input field using JavaScript. I have attempted to do it like this: element.data-ng-model = "..."; However, I realized that it doesn't work due to the presence of dashes. So, I ...

javascripthtmlangularjs

Blur background for specific shaped polygon within svg element

<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" className="ml-10 mt-12 justify-center w-[4.5rem] h-[4.5rem] 1000:h-40 1000:w-40 1000:ml-10 " > <polygon fill=" ...

htmlcsssvgtailwind-csspolygon

The button contains a clickable link inside it, however the button itself is not clickable

I am encountering an issue with a button that contains a link. Whenever I hover over the button, the cursor changes as expected, but clicking on the button itself does not trigger any action. Instead, I have to click on the link inside the button to redi ...

htmlcss

How can I trigger the appearance of the navigation bar when reaching the second div while scrolling

Is there a way to make the navigation bar appear only when a user has scrolled down to the second div on the page? The first div is the header. I am wondering how this can be achieved using jQuery? <!DOCTYPE html> <html> <head> <me ...

jqueryhtmlcssnav

What is the best way to "leap" a sole transform value within an animation?

I need to create an animation that makes a transform function value "jump" in an animation. Within my @keyframes rule are three percentages with the transform property in each one. I specifically want only the scale to transition from 0.5 to 1 between the ...

csscss-animationscss-transforms

Adjusting Modal Size Dynamically Based on Browser Screen Resolution Changes

Working on a jQuery simple modal that loads on load and closes after 15 seconds. The issue I'm facing is when the user's browser screen resolution changes, the size of the modal varies if width and height are set. I attempted to capture the user& ...

javascriptjqueryhtmlsimplemodal

Align the form and button HTML elements in the center of the page horizontally

I have been utilizing bootstrap for the styling of my page. However, I have successfully centered other elements vertically and horizontally, except for the input field and button. The input field and button are currently being displayed on the left side ...

htmlcssbootstrap-4

Set the height of the unordered list (ul) to be

I came across a design on Facebook that resembles a timeline, but I am having trouble adjusting the height of the ul element. <ul class="timeline">...</ul> I want the line in the middle to fill the height of the page even when there is less c ...

jqueryhtmlcss

Adjust the image size without losing sharpness

I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...

javascriptcssimageweb-applicationsminecraft

Steps to correct color gradient on a fixed top navigation bar:

In my Bootstrap 4 project, I have a fixed navbar with a linear gradient background image. The navbar is transparent and fixed, but as I scroll down the page, the gradient disappears. Can anyone help me figure out how to keep the background image visible wh ...

cssbootstrap-4navbartransparentlinear-gradients

Adjusting the tab size and space size to their default settings within VSCode

I'm currently facing an issue with my VSCode setup. I am trying to configure the space size to be equal to 1 and tab size to be equal to 2 as the default for every project. However, despite my efforts, it keeps reverting back to spaces: 4 for each new ...

htmlcssvisual-studio-code

Creating an interactive draggable box with jQuery-UI is as easy as pie

Is it possible to make the innerDropzone div draggable in the following code snippet? div.example { width: 560px; height: 750px; display: block; padding: 10px 20px; color: black; background: rgba(255, 255, 255, 0.4); -webkit-border ...

jqueryhtmlcssjquery-ui

Can the globalcompositeoperation=source-over attribute be applied to putimagedata?

Is it possible to use ctx.globalcompositeoperation=source-over in conjunction with putimagedata, or is it exclusive to drawimage? ...

javascripthtmlhtml5-canvas

Explore the possibility of utilizing Excel VBA to locate images from websites and seamlessly import them into

Right now, my main goal is to browse an open webpage in search of multiple png images and then import them into various cells within a tab on my Excel workbook. The current macro I have takes me through the webpage where I can see which pictures are displ ...

vbaexcelhtmlgetelementsbytagname

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

htmlcssreactjssass

CSS translation animation fails to execute successfully if the parent element is visible

Inquiries similar to this and this have been explored, but do not provide a solution for this particular scenario. The objective is to smoothly slide a menu onto the screen using CSS translation when its parent is displayed. However, the current issue is ...

javascriptjqueryhtmlcss