CODEWITHSUNDEEP
csstwitter-bootstrap
Michael
Michael

Reputation: 13614

How to make space between tables?

I have two tables. One above other.I use bootstrap 3.3.7 in my project.

Here the html declaration code:

 <!--Table 1-->
<table border="0" cellspacing="0" class="table" cellpadding="3" width="100%%">
  <tr>
    <td class="InfoText">בselect start and end point:</td>
  </tr>
  <tr>
    <td height="6"></td>
  </tr>
  <tr>
    <td class="InfoText">measure units:</td>
  </tr>
  <tr>
    <td>
      <select id="unitselect" name="UNITS" class="btn btn-default dropdown-toggle Ctrl" onchange="OnChangeUnits()">
        <option value="mi">kilimeters</option>
        <option value="km">__#DISTANCEKILOMETERS#__</option>
        <option value="usft">__#DISTANCEUSFEET#__</option>
        <option value="ft">__#DISTANCEFEET#__</option>
        <option value="m">__#DISTANCEMETERS#__</option>
      </select>
    </td>
  </tr>
</table>

 <!--Table 2-->
<table border="0" cellpadding="5">
  <tr class="RegText">
    <td>segments:</td>
    <td align="right" class="MeasureData"><span id="partial"></span></td>
    <td>(<span id="units1"> 0.00    meters</span>)</td>
  </tr>
  <tr class="RegText">
    <td>sum:</td>
    <td align="right" class="MeasureData"><span id="total"></span></td>
    <td>(<span id="units2"> 0.00    meters</span>)</td>
  </tr>
</table>

And here is working fiddler.

My question is how can I make space between tables?

Upvotes: 1

Views: 6363

Answers (1)

iorgu
iorgu

Reputation: 3009

With CSS:

table:first-child {
  margin-bottom: 20px;
  /*whatever distance you want between the two tables*/
}
<!--Table 1-->
<table border="0" cellspacing="0" class="table" cellpadding="3" width="100%%">
  <tr>
    <td class="InfoText">בselect start and end point:</td>
  </tr>
  <tr>
    <td height="6"></td>
  </tr>
  <tr>
    <td class="InfoText">measure units:</td>
  </tr>
  <tr>
    <td>
      <select id="unitselect" name="UNITS" class="btn btn-default dropdown-toggle Ctrl" onchange="OnChangeUnits()">
        <option value="mi">kilimeters</option>
        <option value="km">__#DISTANCEKILOMETERS#__</option>
        <option value="usft">__#DISTANCEUSFEET#__</option>
        <option value="ft">__#DISTANCEFEET#__</option>
        <option value="m">__#DISTANCEMETERS#__</option>
      </select>
    </td>
  </tr>
</table>

<!--Table 2-->
<table border="0" cellpadding="5">
  <tr class="RegText">
    <td>segments:</td>
    <td align="right" class="MeasureData"><span id="partial"></span></td>
    <td>(<span id="units1"> 0.00    meters</span>)</td>
  </tr>
  <tr class="RegText">
    <td>sum:</td>
    <td align="right" class="MeasureData"><span id="total"></span></td>
    <td>(<span id="units2"> 0.00    meters</span>)</td>
  </tr>
</table>

Edit:

Or with HTML:

<br/> between the two tables:

Upvotes: 2

Related Questions