CODEWITHSUNDEEP
htmlpaddingcss-tables
Brad Swerdfeger
Brad Swerdfeger

Reputation: 921

Apply padding to display: table-cell element

I'm trying to apply padding to the left side of an element with display:table-cell. I am using a Webkit browser, and this will only ever have to work in a Webkit browser (yay!).

It displays in the proper arrangement, but as if there is no padding at all.

Any pointers? I'm a bit of a newb when it comes to display:table

Here is my HTML (I've embedded css inline so that it's easier to read here):

<div class="setting-group" style="display:table">
   <div class="title">Title</div>
   <div class="field" style="display:table-row">
      <span class="label" style="display:table-cell">Label</span>
      <select class="value" style="display:table-cell; padding-left: 20px" id="id">
         <option value="Opt 1">Option 1</option>
         ...
      </select>
    </div>
</div>

Upvotes: 5

Views: 6424

Answers (3)

firefusion
firefusion

Reputation: 1107

You can also use the property... 

border-spacing:10px;

Upvotes: 1

Evan Nagle
Evan Nagle

Reputation: 5133

Old school style, maybe?

    .setting-group {
        padding-left:50px;
    }

    .setting-group .field .label {
        padding-right:20px;
    }

Upvotes: 0

Gregg B
Gregg B

Reputation: 13727

Wrap your select in a span:

<span class="select" style="display:table-cell; padding-left:20px"><select class="value"  id="id"></span>

Upvotes: 2

Related Questions