CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
Capslock10
Capslock10

Reputation: 806

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

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%;


    }

Upvotes: 0

Views: 228

Answers (1)

Tony Hensler
Tony Hensler

Reputation: 1492

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.

Upvotes: 2

Related Questions