Блог

Главная - Вопросы по программированию - Как исправить и разместить всю информацию, чтобы она оставалась в таблице?

Как исправить и разместить всю информацию, чтобы она оставалась в таблице?

#css

Вопрос:

Как мне сделать так, чтобы вся информация оставалась и помещалась в таблице, кроме использования style="overflow:scroll" ?

таблица, как на картинке, перелилась вправо в середине LATEST DATE CHECKED .

Ниже приведен мой код.

 .card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
}

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: grey;
} 
 <div class="nk-block">
  <div class="card card-bordered">
    <table class="table table-voucher">
      <thead class="tb-voucher-head">
        <tr class="tb-voucher-title">
          <th class="tb-voucher-date tb-col-md">
            <span>DATE</span>
          </th>
          <th class="tb-voucher-seen tb-col-md">
            <span>LATEST DATE CHECKED</span>
          </th>
          <th class="tb-voucher-status tb-col-md ">
            <span>STATUS</span>
          </th>
        </tr>
      </thead>
      <tbody class="tb-voucher-body" id="voucher_content"></tbody>
    </table>
  </div>
</div>

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

1. можете ли вы также добавить код css

2. Нам определенно понадобится css. На изображении, похоже, отображаются только две «вкладки» для заголовков таблиц, поэтому там что-то происходит. Вы, вероятно, найдете инспектора вашего браузера полезным, чтобы точно видеть, что происходит с этими элементами.

3. обновил код. похоже, проблема в карточке ?

4. @teefal Нет ли большего кода для css «tb-ваучер-название» и все такое

Ответ №1:

я кое-что попробовал, и теперь это выглядит так

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
<style type="text/css">
thead {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0, 0, 0, 0.125);
    border-radius: 4px;
}

table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
    }
    
 th {
    padding: 13px;
 }
 
</style>
</head>
<body>
    <div class="nk-block">
            <div class="card card-bordered">
                <table border="1">
                    <thead class="tb-voucher-head">
                        <tr>
                            <th>DATE</th>
                            <th>LATEST DATE</th>
                            <th>CHECKED</th>
                            <th>STATUS</th>                        
                    </thead>
                </table>
            </div>
        </div>

</body>
</html>

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

1. в какой строке я должен поместить отступ-правильно ?

2. подожди, я собираюсь попробовать

Метки: ,