How is it that the magic table refuses to conform to CSS styling? This is truly sorcery!

My HTML table is as simple as it gets:

        <table class="dispdtab">
            <tr>
                <td><b>Dealer: </b></td>
                <td>dealername</td>
            </tr>
            <tr>
                <td><b>Address: </b></td>
                <td>123 main srr</td>
            </tr>
            <tr>
                <td><b>Contact: </b></td>
                <td>Bob Dole</td>
            </tr>
        </table>

I've been struggling to center this table, but no matter what CSS I try, it just won't cooperate. It's like the table is mocking me, refusing to budge and laughing at my attempts.

Here are some of the CSS styles I've experimented with:

.dispdtab {
    margin:0 auto;
    text-transform:uppercase;
    font-size:.8em;
}
.dispdtab td{
    padding:0 .25em;
}

I even attempted adding tbody after the class name, and tinkered with display:block; settings. I'm on the verge of resorting to an old-school <center>...</center> tag.

Interestingly enough, when I added border:1px solid black;, only the first row was affected by the border.

What am I missing here?

Answer №1

By observing the code below, you can easily notice that the table is centered on the page. However, in order to achieve this effect, I had to specify a width for the floating div. If you remove the width declaration from the div, its width will default to match the calculated width of the table, making it difficult to see the center alignment.

In web design, it's important to consider providing dimensions to elements. While we strive for fluidity in our designs, there are times when specifying widths or heights in pixels can be necessary. The key lies in knowing when to make these specifications.

http://jsbin.com/oJuxoQU/1/edit

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

Leverage data retrieved from a JSON response to dynamically populate variables on a webpage through an AJAX API

After making an AJAX call to my API and receiving JSON data, I am looking to dynamically update my webpage using specific values from the JSON response. <div class="Name"></div> <div class="Role"></div> <div class="Location"> ...

Novice problem with the <div> tag

I am currently in the process of developing a website, and I have encountered an issue with the title not staying within the designated div box at the top of the page. <div style="width:1000px;height:40px;background:grey;border:3px solid;border-radiu ...

My node.js code is not producing the expected result. Can anyone point out where I may be going wrong?

I've been working on a BMI calculator where I input two numbers, they get calculated on my server, and then the answer is displayed. However, I'm having trouble receiving the output. When I click submit, instead of getting the answer, I see a lis ...

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...

Add a unique shape to the CSS clip property

Recently, I've been delving into the clip property of CSS and its ability to apply a rectangle or square object. Despite my research efforts, I haven't come across a clear answer to my question. Can you actually use a customized shape with the c ...

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

Updating URL links with PHP and DOM manipulation

I am attempting to transform all the links within an HTML variable into random ones using PHP. However, I am encountering an issue that is preventing the links from being properly changed. Below is the code snippet I am working with: <?php $jobTempla ...

A guide to using Angular to emphasize text based on specific conditions met

Currently, I am developing a testing application that requires users to choose radio type values for each question. The goal is to compare the selected answers with the correct answers stored in a JSON file. To achieve this, I have implemented an if-else ...

Prevent a button on my side bar from being clicked until the user has logged in?

How can I use Django and HTML to disable a button in my tab bar until a user is logged in? This is my sidebar: <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href ...

How do I make an element stay in place between two other elements?

Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

Is there a problem with addEventListener returning false?

What does keeping the third parameter as false in the line below signify? var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); ...

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

As a beginner in HTML website design, I have recently started using HTML, CSS, jQuery, and JavaScript for designing websites. After creating a site with almost forty webpages, the client requirements are changing, requiring changes to be made across all ...

Practical steps for programmatically adding or removing md-disable-backdrop in md-sidenav

Can the md-disable-backdrop attribute be removed from HTML? The issue arises when opening the side navigation as the md-sidenav does not have the md-disable-backdrop attribute. After making a selection from the form displayed in the side navigation, I now ...

What purpose does tagging serve in my template for polymer property binding?

I'm currently exploring the way Polymer handles the rendering of properties in a custom element's template. I've come across some interesting behavior that I haven't been able to fully grasp yet. Specifically, I noticed that certain pro ...

Utilize the Bootstrap grid layout to create space for empty columns on the left-hand

Is it possible to use CSS to ensure that empty columns in a predefined bootstrap grid are on the left rather than the right, without manually adding empty entries into the left hand columns? For example, if the column count is 4 (col-xs-3) and there are 5 ...

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

Click to switch CodeMirror's theme

http://jsbin.com/EzaKuXE/1/edit I've been attempting to switch the theme from default to cobalt and vice versa, toggling each time the button is clicked. However, I am facing an issue where it only switches to the new theme once and doesn't togg ...

Using Node JS and Express to deliver a static HTML page with an embedded image

I have successfully set up a system where I can serve static HTML pages using express. I have also installed "ejs" to render the page with data from local variables in my .js file. The only issue I am facing is displaying a small logo in the corner of the ...