Есть три таблицы разных размеров, как можно их выровнять?

Question

[doctor22who]

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Название</th>
        <th>Подробно</th>
        <th>Дата</th>
       
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>iPhone 7</td>
        <td>Phone 7 и iPhone 7 Plus — смартфоны корпорации Apple, использующие процессор Apple A10 Fusion и операционную систему iOS 10, представленные 7 сентября 2016 года[2][6]. Диагональ экрана и разрешение была оставлена такой же по сравнению с предыдущими моделями: iPhone 6s и iPhone 6s Plus. Толщина телефона— 7,1-7,3 мм, без учета модуля камеры, немного выступающей за пределы (двух камер в iPhone 7 Plus). Смартфоны используют только порт Lightning, лишившись традиционного разъёма TRRS mini-jack (3,5 мм) для подключения проводных наушников. Также телефоны получили защиту от воды и пыли на уровне IP67</td>
        <td>03-07-2017</td>
      </tr>
  </table>

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Название</th>
        <th>Подробно</th>
        <th>Дата</th>
       
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> MOTOROLA Moto G4 (XT1622) 16Gb Dual Sim (white)</td>
        <td>Экран (5.5", IPS, 1920x1080)/ Qualcomm Snapdragon 617 (1.5 ГГц)/ основная камера: 13 Мп, фронтальная камера: 5 Мп/ RAM 2 ГБ/</td>
        <td>07-03-2017</td>
      </tr>
  </table>
   <table class="table table-bordered">
    <thead>
      <tr>
         <th>Название</th>
        <th>Подробно</th>
        <th>Дата</th>
       
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>nomi 4</td>
        <td>Не найдено</td>
        <td>07-03-2017</td>
      </tr>
  </table>
  </div>

https://jsfiddle.net/kjod7f7m/
Как можно выровнять заголовки и контент внутри них?

Answer 1

[Adikjoro]

table tr td:first-child {
  width: 150px;
}

Если же хочешь, чтобы все таблицы меняли размер колонок относительно самой широкой, то тут надо прибегать к JS. Если такое необходимо, могу показать).

Comments

[doctor22who]

Да, если мне нужно чтобы все таблицы меняли размер колонок относительно самой широкой

[Adikjoro]

doctor22who: Вот, пожалуйста). Надеюсь, знакомы с Jquery. А вообще если надо все колонки тупо выровнять по конкретному размеру, то надо всего лишь задать всем колонкам одну ширину.