Как сделать так, чтобы элемент html имел ту же начальную ширину, что и таблица - PullRequest
Новая
       3

Как сделать так, чтобы элемент html имел ту же начальную ширину, что и таблица

0 голосов
/ 17 июня 2020

Я работаю над простой веб-страницей, и у меня довольно простая проблема (возможный CSS вопрос). На веб-странице у меня есть таблица и кнопка прямо под ней. Я хочу, чтобы кнопка имела одинаковую "начальную ширину?" как таблица. Я добавил ссылку на снимок экрана, чтобы вы могли лучше понять, что я пытаюсь сделать. Link to the screenshot

<table id="myTable" align="center" border="1px" style="width: 1400px; line-height: 30px;">
  <thead>
    <tr>
      <th colspan="18" style="font-family: Verdana;">
        <h2>Данные договоров</h2>
      </th>
    </tr>
  </thead>
  <tbody>
    <t class="element">
      <th class="title" style="font-family: Verdana;">ID</th>
      <th class="title" style="font-family: Verdana;">Продукт</th>
      <th class="title" style="font-family: Verdana;">Пакет</th>
      <th class="title" style="font-family: Verdana;">Основной договор</th>
      <th class="title" style="font-family: Verdana;">Номер договора</th>
      <th class="title" style="font-family: Verdana;">Страхователь</th>
      <th class="title" style="font-family: Verdana;">Премия в валюте</th>
      <th class="title" style="font-family: Verdana;">Комиссия в валюте</th>
      <th class="title" style="font-family: Verdana;">Дата договора</th>
      <th class="title" style="font-family: Verdana;">Дата начала договора</th>
      <th class="title" style="font-family: Verdana;">Дата окончания договора</th>
      <th class="title" style="font-family: Verdana;">Дата окончания страх. защиты</th>
      <th class="title" style="font-family: Verdana;">Время расторажения</th>
      <th class="title" style="font-family: Verdana;">Причина расторажения</th>
      <th class="title" style="font-family: Verdana;">Статус договора</th>
      <th class="title" style="font-family: Verdana;">Номер заявления</th>
      <th class="title" style="font-family: Verdana;">Вложения</th>
    </t>
    <tr id="searchRes">
      <!-- querie results are put here -->
    </tr>
  </tbody>

</table>

1 Ответ

0 голосов
/ 18 июня 2020

Это то, чего вы пытались достичь? Фрагмент Codepen

Я сделал таблицу меньше, чтобы сделать ее более представительной, но в основном идея та же. Оберните таблицу и кнопку в один родительский элемент <div> и отцентрируйте его, задав родительскому элементу <div> ту же ширину, что и у вашей таблицы, и примените margin:0 auto;

...