Установить ширину столбца таблицы 100% с фиксированным макетом таблицы? - PullRequest
Новая
       79

Установить ширину столбца таблицы 100% с фиксированным макетом таблицы?

0 голосов
/ 15 октября 2019

в своей таблице я установил макет таблицы: фиксированный с шириной 100%, и это здорово, однако содержание ячеек td уходит в другое наложение. Я знаю, что в таблице много столбцов, поэтому я могу также спросить вас, как мне сделать таблицу более читаемой. Спасибо 

    table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
  width:100%;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

Предварительный просмотр таблицы

Ответы [ 2 ]

0 голосов
/ 15 октября 2019

Вы можете уменьшить размер шрифта или реструктурировать таблицу:

примеры: font-size до ширины экрана через calc(10px + 0.5vw) (сбросьте эти значения в соответствии с вашими потребностями, если они используются) . 

table {
  width: 100%;
  table-layout: fixed;
  font-size: calc(10px + 0.5vw);
}
input {
  max-width: 100%;
  box-sizing: border-box;
}
input:focus {
  position: absolute;
  max-width: auto;
  background: lightgray;
}
th,
td {
  border: 1px solid;
  width: max-content;
  text-align: center;
}
thead td {
  text-align: left;
  vertical-align: top;
}
tbody {
  counter-reset: trs;
}
tbody tr {
  counter-increment: trs;
}
tbody tr td:first-child::before {
  content: 'N° 'counter(trs);
}
td.fa {display:table-cell;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<table>
  <thead>
    <tr>
      <th>N.</th>
      <th><b class="fa fa-wrench"></b></th>        
      <th><b class="fa fa-certificate"></b></th>      
      <th><b class="fa fa-user-tie"></b></th>      
      <th>IP</th>      
      <th><b class="fa fa-link"></b></th>      
      <th><b class="fa fa-door-open"></b></th>      
      <th><b class="fa fa-server"></b></th>      
      <th><b class="fa fa-user-circle"></b></th>      
      <th><b class="fa fa-key"></b></th>      
      <th><b class="fa fa-dice-d20"></b></th>      
      <th><b class="fa fa-wrench"></b></th>      
      <th><b class="fa fa-file-alt"></b></th>
      <th>$dat</th>
      <th>$scodiceutum</th>
        </tr>
    <tr> 
      <td></td>
      <td></td>
      <td></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
    </tr>
    </thead>
  <tbody>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr> 
    <tr>    
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>    
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>    
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>  
    <tr>      
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr> 
    <tr>        
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
  </tbody>
</table>

или разбейте таблицу на 2 столбца, используя класс fontawsome для создания отсутствующих ячеек. 

table {
  width: 100%;
  table-layout: fixed;
  font-size: calc(10px + 0.5vw);
}

input {
  max-width: 100%;
  box-sizing: border-box;
}

input:focus {
  position: absolute;
  max-width: auto;
  background: lightgray;
}

th,
td {
  border: 1px solid;
  width: min-content;
  text-align: center;
}

thead td {
  text-align: left;
  vertical-align: top;
}

tbody {
  counter-reset: trs;
}

tbody tr {
  counter-increment: trs;
}

tbody tr td:first-child::before {
  content: 'datas user N° 'counter(trs);
}

td.fa {
  display: table-cell;
}

@media screen and (max-width: 1200px) {
  input {
    width: auto;
  }
  thead,
  thead tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%
  }
  thead td {
    flex: 1;
  }
  thead tr td:empty,
  thead tr:first-child {
    display: none;
  }
  tbody td:first-child {
    background: tomato;
  }
  table,
  thead,
  tbody,
  tr {
    display: block;
  }
  tbody tr td.fa {
    display: table!important;
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
  }
  tbody tr td:not(:first-child).fa::before {
    display: table-cell;
    text-align: center;
    border-right: solid;
    vertical-align: middle;
    padding: 0.25em;
    width: 25%;
  }
  td.wrench::before {
    content: "\f0ad";
  }
  td.certificate::before {
    content: "\f0a3";
  }
  td.user-tie::before {
    content: "\f508";
  }
  td.IP::before {
    content: "IP";
  }
  td.link::before {
    content: "\f0c1";
  }
  td.door-open::before {
    content: "\f52b";
  }
  td.server::before {
    content: "\f233";
  }
  td.user-circle::before {
    content: "\f2bd";
  }
  td.key::before {
    content: "\f084";
  }
  td.dice-d20::before {
    content: "\f6cf";
  }
  td.file-alt::before {
    content: "\f15c";
  }
  td.data::before {
    content: "$DATA";
  }
  td.codice::before {
    content: "$CODICE...";
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<table>
  <thead>
    <tr>
      <th>N.</th>
      <th><b class="fa fa-wrench"></b></th>
      <th><b class="fa fa-certificate"></b></th>
      <th><b class="fa fa-user-tie"></b></th>
      <th>IP</th>
      <th><b class="fa fa-link"></b></th>
      <th><b class="fa fa-door-open"></b></th>
      <th><b class="fa fa-server"></b></th>
      <th><b class="fa fa-user-circle"></b></th>
      <th><b class="fa fa-key"></b></th>
      <th><b class="fa fa-dice-d20"></b></th>
      <th><b class="fa fa-wrench"></b></th>
      <th><b class="fa fa-file-alt"></b></th>
      <th>$dat</th>
      <th>$scodiceutum</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269; $myVar" /></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
  </tbody>
</table>

второй фрагмент, основанный на Как составлять столбцы таблицы для имитации представления календаря?

0 голосов
/ 15 октября 2019

Мое предложение было бы спросить, почему так много столбцов? Посмотрите на это так, таблица не является подробным представлением. Это больше инструмент навигации, чтобы добраться до интересного ряда. Иногда, но это очень редко, вам нужно сравнить строки друг с другом. Тогда стол, если интерес. Но это часто в научных целях. Если бы вы могли представить подробное представление, тогда каждая строка могла бы иметь ссылку на страницу сведений. Я вижу два преимущества этого.

  1. Вы можете показать меньше столбцов в таблице, а затем решить проблему с неподходящими столбцами.

  2. Вы можете вместо этого выбрать список ul и получить поддержку для таких устройств, как мобильные. Обновлю с картинкой

...