Таблица HTML - как поместить несколько элементов в <td>? - PullRequest
Новая
       7

Таблица HTML - как поместить несколько элементов в <td>?

0 голосов
/ 27 апреля 2018

Как я могу получить «Изменить имя пользователя», «Изменить пароль» и «удалить пользователя» для позиционирования в строке и получить их в категории «Действия»? 

<table>
  <thead>
      <tr>
          <th>Username</th>
          <th>Listings</th>
          <th>Actions</th>
      <tr>
  </thead>

  <tbody>
      <tr>
          <td>hi</td>
          <td>hi</td>
      </tr>

      <tr>
          <td>hi</td>
          <td>hi</td>
      </tr>

      <tr>
          <td>
              <a>ChangeUsername</a>
              <a>ChangePassword</a>
              <form>                           
                   <button>Delete User</button>
              </form>
          </td>
      </tr>
  </tbody>
</table>

Ответы [ 3 ]

0 голосов
/ 27 апреля 2018

Лучший способ работы с таблицами - это иметь такое же количество столбцов, как у заголовков, например, для адаптации кода выше: 

<table>
  <thead>
      <tr>
          <th>Username</th>
          <th>Listings</th>
          <th>Actions</th>
      <tr>
  </thead>

  <tbody>
      <tr>
          <td>hi</td>
          <td>hi</td>
          <td></td>          
      </tr>

      <tr>
          <td>hi</td>
          <td>hi</td>
          <td></td>
      </tr>

      <tr>
          <td></td>
          <td></td>
          <td>
              <a>ChangeUsername</a>
              <a>ChangePassword</a>
              <form>                           
                   <button>Delete User</button>
              </form>
          </td>
      </tr>
  </tbody>
</table>

Это покажет две пустые ячейки, а затем все, что вы положили в третью ячейку (действия во главе).

0 голосов
/ 27 апреля 2018

внутри tbody a <tr> должно иметь 3 <td> как на thead 

<table border="1">
  <thead>
      <tr>
          <th>Username</th>
          <th>Listings</th>
          <th>Actions</th>
      <tr>
  </thead>

  <tbody>
      <tr>
          <td>hi</td>
          <td>ha</td>
          <td>
              <button>ChangeUsername</button>
              <button>ChangePassword</button>
              <button>Delete User</button>
          </td>
      </tr>

      <tr>
          <td>hi</td>
          <td>hi</td>
          <td>
              <button>ChangeUsername</button>
              <button>ChangePassword</button>
              <button>Delete User</button>
          </td>
      </tr>
  </tbody>
</table>
0 голосов
/ 27 апреля 2018

Вы должны поместить их в третий столбец.

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

<table>
  <thead>
      <tr>
          <th>Username</th>
          <th>Listings</th>
          <th>Actions</th>
          <th></th>
      <tr>
  </thead>

  <tbody>
      <tr>
          <td>hi</td>
          <td>hi</td>
          <td><p>ChangeUsername</p></td>
          <td>
              <form>                           
                   <button>Delete User</button>
              </form>
          </td>
      </tr>

      <tr>
          <td>hi</td>
          <td>hi</td>
          <td><p>ChangePassword</p></td>
          <td>
              <form>                           
                   <button>Delete User</button>
              </form>
          </td>
      </tr>
  </tbody>
</table>
...