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 to change css elements in HAML dependent on what page is calling for the content?

    How to apply different css margin-top to each children in a list

    How to make the bootstrap button,when clicked to redirect to a specific page

    How can I change the css class rules using jQuery?

    How can I add a transition for this growing div?

    How to call external CSS in presence of inline and internal?

    how to remove css from the text box?

    Basic Accordion pull down using java script and css not working. How can I get it to not have a symbol beside it?

    How to put the table inside the box

    How To Embed font-awesome CSS into DOM Scripting (javascript)?

    How to disable fixed header on Mobile with CSS

    How to optimize CSS code?

    How to locate the element within CSS using javascript

    How can we make responsive height of header

    How do i apply Table Header color to Table body using JQuery

    How to set up a correct cascade with label statement

    How to show color only to the first li?

    How do I create a navigation system like that of Lowes.com [closed]

    How to apply direction css attribute in list elements

    How to hide a segment of my website using PHP

    How can I style flexbox children in a multiline

    How to hide first level span element by CSS “>” selector

    How to create new top headers for weebly

    how to achieve facebook mobile site buttons menu scroll effect?

    How to display the bottom of an image?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to give a matte-finish (non-glassy) look to an image with CSS?

    How to clip inside a box in css?

    How can I change this CSS for desktop browsers only?

    How to make a css compatible by all browser