Блог

Главная - Вопросы по программированию - Как создать строку таблицы с разной шириной, когда она находится внизу?

Как создать строку таблицы с разной шириной, когда она находится внизу?

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я хочу добиться дизайна таблицы, как показано ниже введите описание изображения здесь

Первая строка будет свернута (что еще не реализовано), и появится нижняя строка, я хочу, чтобы вторая строка была немного сдвинута.Для достижения этой цели я использовал second tbody, но мне показалось, что слишком много работы.Разве это невозможно сделать со вторым tr?

 <!DOCTYPE html>
<html lang="en">
<head>
<style>
tr{
border:1px solid black;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S oqd12jhcu A56Ebc1zFSJ" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>        
  <table class="table mt-2">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Address</th>
        <th>Birth date</th>
        <th>Gender</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Marley</td>
        <td>Johnson</td>
        <td>mjhonson@mail.com</td>
        <td>Canada</td>
        <td>15/05/1990</td>
        <td>Female</td>
        <td><i class="fas fa-angle-down"></i></td>
      </tr>
        <tr>
        <td>Sam</td>
        <td>Kirlman</td>
        <td>skirlman@mail.com</td>
        <td>New Jersey</td>
        <td>12/03/1989</td>
        <td>Male</td>
        <td><i class="fas fa-trash"></i></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Ответ №1:

Создайте новый класс для целевой строки.

  <tr class="push-right">
   <td>Sam</td>
   <td>Kirlman</td>
   <td>skirlman@mail.com</td>
   <td>New Jersey</td>
   <td>12/03/1989</td>
   <td>Male</td>
   <td><i class="fas fa-trash"></i></td>
 </tr>

Первый td элемент в строке должен действовать как элемент блока, чтобы мы могли назначить margin свойство.

 .push-right {
  td:first-child {
    border-left: 2px solid black;
    margin-left: 10px;
    display:block;
  }
}

JSFiddle

Комментарии:

1. Установка одной ячейки таблицы display: block — очень плохая идея. Наличие элемента «block» внутри строки таблицы не определено, поэтому совпадение, что в настоящее время он отображается так, как вы этого хотите. Это очень легко отобразить по-другому или сломать.

2. Не могли бы вы пояснить, почему это плохая идея? Я знаю только, что это не будет работать в версиях IE старше 9.

3. Я считаю, что я был неправ. Я думал, что это не определено, но теперь я нашел определение: в подобном случае браузер должен создать анонимную ячейку таблицы вокруг элемента блока, чтобы это сработало. Однако я все еще думаю, что это немного подозрительно. Лично я бы предпочел явно добавить дополнительный элемент внутри ячейки таблицы (аналогично тому, как я сделал в первом примере моего ответа).

4. Где вы находите «определение»? Я имею в виду, на что вы ссылаетесь?

5. w3.org/TR/CSS2/tables.html#anonymous-boxes В нумерованном списке (пункт 2.3.): «Если дочерний элемент C поля «таблица-строка» не является «ячейкой таблицы», то создайте анонимный блок «таблица-ячейка» вокруг C […]»

Ответ №2:

Строки таблицы не могут иметь разную ширину. (Также обратите внимание, что сама строка таблицы не может иметь границы).

Простым решением может быть добавление левого отступа к столбцу first name и создание «поддельной» границы для дополнительного элемента. Однако это не очень гибко, потому что, например, ячейки таблицы не могут иметь отступов.

 table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 0;
}

.sub-item .firstname {
  padding-left: 2em;
  border: none;
}

.sub-item .firstname div {
  border: 1px solid black;
  margin: -1px;
}  
 <table class="table mt-2">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>Address</th>
      <th>Birth date</th>
      <th>Gender</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="firstname">Marley</td>
      <td>Johnson</td>
      <td>mjhonson@mail.com</td>
      <td>Canada</td>
      <td>15/05/1990</td>
      <td>Female</td>
      <td><i class="fas fa-angle-down"></i></td>
    </tr>
    <tr class="sub-item">
      <td class="firstname"><div>Sam</div></td>
      <td>Kirlman</td>
      <td>skirlman@mail.com</td>
      <td>New Jersey</td>
      <td>12/03/1989</td>
      <td>Male</td>
      <td><i class="fas fa-trash"></i></td>
    </tr>
  </tbody>
</table>

Другой возможностью может быть добавление дополнительного столбца в начале. Однако это может сбить с толку программы чтения с экрана и затруднить доступность.

 table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.sub-item .indent {
  border: 0;
  width: 2em;
}  
 <table class="table mt-2">
  <thead>
    <tr>
      <th colspan="2">Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>Address</th>
      <th>Birth date</th>
      <th>Gender</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="firstname" colspan="2">Marley</td>
      <td>Johnson</td>
      <td>mjhonson@mail.com</td>
      <td>Canada</td>
      <td>15/05/1990</td>
      <td>Female</td>
      <td><i class="fas fa-angle-down"></i></td>
    </tr>
    <tr class="sub-item">
      <td class="indent"></td>
      <td class="firstname">Sam</td>
      <td>Kirlman</td>
      <td>skirlman@mail.com</td>
      <td>New Jersey</td>
      <td>12/03/1989</td>
      <td>Male</td>
      <td><i class="fas fa-trash"></i></td>
    </tr>
  </tbody>
</table>