Столбцы таблицы перемещаются к центру таблицы, но не выровнены по центру, Bootstrap 3

Question

У меня есть две соседние таблицы с использованием Bootstrap 3. Единственная проблема в том, что я бы хотел, чтобы столбцы были «сдвинуты» к центру таблицы с равным интервалом на левом и правом концах. (но я не хочу, чтобы текст был выровнен по центру).

Я могу сделать это, заключив ячейки таблицы в <div> и добавив им отступы. Но я не был уверен, есть ли более быстрый способ добиться этого.

Изменить : Чтобы уточнить, я знаю, что могу использовать text-align: center для выравнивания столбцов по центру и это переместит содержимое к центру. Но я не хочу, чтобы текст был по центру. Я просто хочу, чтобы содержимое переместилось внутрь.

Ниже приведен пример. Таблица 1 - до того, как я добавлю какие-либо отступы. Таблица 2 с дополнением к первому <div>. То, как выглядит таблица 2, ближе к тому, что я хотел бы, с первым столбцом, перемещенным к центру. Но в идеале я бы хотел, чтобы слева и справа от обоих столбцов были равные пробелы. Есть ли способ добиться этого, не злоупотребляя CSS или не нарушая отзывчивость Bootstrap?

td>div {
  padding-left: 35px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-condensed table-borderless">
        <thead>
          <tr>
            <th>Table 1</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Some Field Name
            </td>
            <td>428 mg/L</td>
          </tr>
          <tr>
            <td>
              Some Field Name
            </td>
            <td>428 mg/L</td>
          </tr>
          <tr>
            <td>
              Some Field Name
            </td>
            <td>428 mg/L</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-sm-6">
      <table class="table table-striped table-condensed">
        <thead>
          <tr>
            <th>Table 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div>
                Some Field Name</div>
            </td>
            <td>
              <div>
                428 mg/L</div>
            </td>

          </tr>
          <tr>
            <td>
              <div>
                Some Field Name</div>
            </td>
            <td>
              <div>
                428 mg/L</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                Some Field Name</div>
            </td>
            <td>
              <div>
                428 mg/L</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

Если вы используете таблицу,

{
    text-align: center; 
    vertical-align: middle;
}

лучше всего сделать центр содержимого.

Но я действительно рекомендую вам использовать Flex для создания таблиц, это дает вам множество вариантов стили и размещение.

Пример таблицы на гибкости:

    <div class="screening-table">
        <div class="flex table-heading">
            <div class="min-width table-heading__cell heading__cell--1">Sample</div>
            <div class="min-width table-heading__cell heading__cell--2">Target</div>
            <div class="min-width table-heading__cell heading__cell--3">Target Form</div>
            <div class="min-width table-heading__cell heading__cell--4">Target Amt.</div>
            <div class="min-width table-heading__cell heading__cell--5">Supplement</div>
            <div class="min-width table-heading__cell heading__cell--6">Purpose</div>
            <div class="min-width table-heading__cell heading__cell--7">Expected Tracer Behavior/Explanation
            </div>
        </div>

        <div class="table-all-body">
            <div class="flex table-body">
                <div class="flex min-width table-body__cell heading__cell--1">
                    <div class="more-icon">
                        <img src="images/screening/ic_more_vert_24px.png" alt="view more">
                    </div>
                    1
                </div>
                <div class="min-width table-body__cell heading__cell--2">NTRK4</div>
                <div class="flex min-width table-body__cell heading__cell--3">
                    <div class="info-icon">
                        <img src="images/screening/ic_info_24px.png" alt="info">
                    </div>
                    <span>Avi-NTRK4(1-796) DP</span>
                </div>
                <div class="min-width table-body__cell heading__cell--4">250 pmol</div>
                <div class="flex min-width table-body__cell heading__cell--5">
                    <div class="info-icon">
                        <img src="images/screening/ic_info_24px.png" alt="info"></div>
                    <span>None</span>
                </div>
                <div class="min-width table-body__cell heading__cell--6">
                    Identify small molecules that bind the non-phosphorylated full-length target
                </div>
                <div class="min-width table-body__cell heading__cell--7">Unclear whether this tracer binds
                    the
                    non-phosphorylated and phosphorylated NTRK4 with similar affinities
                </div>
            </div>
            <div class="rectangle"></div>

CSS:

.screening-table {
    margin-top: 72px;
    // margin-left: 26px;
    // margin-top: 56px;
    margin-left: 246px;

    .min-width {
        min-width: 42px;
    }

    .table-heading {
        flex-direction: row;
    }

    .table-heading {
        background: $catsill-white;
        box-shadow: 0px -1px 0px $catsill-white, 0px 1px 0px $catsill-white;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .table-heading__cell {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        margin-left: 14px;
        margin-right: 14px;
        color: $gull-gray;
    }

    .table-body {
        background: $primary-color;
        box-shadow: 0px 2px 6px rgba($text-color--black, 0.102874);
        border-radius: 3px;
    }

    .table-body__cell {
        margin-left: 14px;
        margin-right: 14px;
        padding-top: 20px;
        padding-bottom: 10px;

        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 19px;

        color: $plantation;

    }

    .info-icon {
        width: 24px;
        height: 24px;
    }

    .more-icon {
        margin-left: 8px;
    }

    .rectangle {
        border: 1px solid $catsill-white;
    }




}

Answer 2

с использованием text-align: center;

    table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

.table td {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-condensed table-borderless">
        <thead>
          <tr>
            <th>Table 1</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Some Field Name
            </td>
            <td>428 mg/L</td>
          </tr>
          <tr>
            <td>
              Some Field Name
            </td>
            <td>428 mg/L</td>
          </tr>
          <tr>
            <td>
              Some Field Name
            </td>
            <td>428 mg/L</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-sm-6">
      <table class="table table-striped table-condensed">
        <thead>
          <tr>
            <th>Table 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div>
                Some Field Name</div>
            </td>
            <td>
              <div>
                428 mg/L</div>
            </td>

          </tr>
          <tr>
            <td>
              <div>
                Some Field Name</div>
            </td>
            <td>
              <div>
                428 mg/L</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                Some Field Name</div>
            </td>
            <td>
              <div>
                428 mg/L</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>