CSS table formatting

by Michael Sobczak

HTML

<div class="groupfieldset">
  <ul class="fieldlist">
    <li class="field">
      <label>Media Plan Budget</label>
      <span></span>
    </li>
    <li class="field">
      <label>Trade Area</label>
      <span> 5 Miles</span>
    </li>
    <li class="field">
      <label># of Sites</label>
      <span>1</span>
    </li>
    <li class="field">
      <label>Selected Products</label>
      <!-- display: inline-block; -->
        <span style="">
          <ul style="list-style-type: none; padding: 0; margin: 0;">
            <li style="padding: 0; margin: 0;">
              <span>SM Turnkey Premium Postcard</span>
            </li>
            <li><span>SM Turnkey Big Sheet</span></li>
          </ul>
        </span>
  </li>
  </ul>
</div>

CSS

div.groupfieldset {
            width: 350px;
            float: left;
            font-family: Arial, Helvetica, sans-serif;
            display: table;
        }

        div.groupfieldset ul {
            padding: 0 !important;
            -webkit-padding-start: 0px !important;
            list-style-type: none !important;
        }
                     
        ul.fieldlist li {
          list-style-type: none;
          margin-left: 0;
          vertical-align: top;
          padding-bottom: 10px;
          display: table-row;
        }
        
        ul.fieldlist label {
          width: 175px !important;
          font-weight: bold;
          float: left;
          text-align: right;
          padding-right: 10px;
          display: table-cell;
          padding-bottom: 10px;
        }
        
        ul.fieldlist span {
          width: 175px !important;
          font-weight: normal;
          text-align: left;
          padding-right: 10px;
          display: table-cell;
          vertical-align: top;
          padding-bottom: 10px;
        }

        li.field {
          line-height: 18px;
        }