How to make the html table on same line? Wordpress, woocommerce


Tags: html,css,wordpress,woocommerce

Problem :

I am modifying the checkout page, and I created two tables and using css display: inline-block; to make those on the same line. However, the content inside the table don't fill all the space of the table. How can I fix it?

Thanks

enter image description here

Html code of table 1:

<table class="shipping_table" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>        
                    <p class="form-row form-row validate-required" id="address_list_field">
                        <label for="address_list" class="">Delivery region: <abbr class="required" title="required">*</abbr></label>
                            <select name="address_list" id="address_list" class="select " data-placeholder="">
                                <option value="3">1/F, G Block, Kc park</option>
                            </select>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

CSS:

.shipping_table {
        display: inline-block;
        width: 48%;

    }

    .billing_table
    {
        display: inline-block;
         width: 48%;


    }


Solution :

Why don't you enclose the two tables into one table with two cells?
Set the outer tables so the <td> are 50/50 width.
Set the inner tables to be 100% width (.shipping_table, .billing_table)

In a perfect world you should be doing this inside <div>s and floating the boxes.


    CSS Howto..

    How can I make my div's svg background image scale dynamically and stay in the center of the div

    How to test print output of browsers with online tools?

    How to avoid div width increase on hover

    CSS Menu - how to [closed]

    How to place a color cover on top of an image in CSS

    How to edit CSS style of a div using C# in .NET

    How to remove border from appearing around the image?

    How to color a responsive table in Bootstrap?

    How to place elements on top of each other

    Show notification counter with bootstrap

    How to create a dynamically sized form background with CSS?

    How to do Vertical+Horizontal centering in CSS

    How to prevent page jump when using # href to swap gallery images using a div ID?

    How do I position text within a box with css?

    How do i style a list within a list?

    how to override font-color dynamically with css color property

    How to return WebElement having particular CSS property using JavascriptExecutor?

    How determine what CSS selector to use from my HTML source code?

    How to replicate the styling of html heading tags

    How do I use “:nth-of-type” to select an element after the element is updated by jQuery?

    iPhone iOS how to send an HTML email with CSS styling?

    How to put the div at the center with css?

    How to change css styles on alloy-ui form validator?

    How to expand a div with css

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How to make letters in SVG to be animatable individually?

    How to show the same font which in photoshop on my webpage?

    How can I align this?

    How to have only a vertical scroll bar on a div

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )