Таблицы стилей в мобильном телефоне, чтобы они go полной ширины и прокручивать, если содержание длиннее - PullRequest
Новая
       38

Таблицы стилей в мобильном телефоне, чтобы они go полной ширины и прокручивать, если содержание длиннее

1 голос
/ 12 апреля 2020

Я ищу чистое решение CSS, чтобы таблицы вели себя следующим образом:

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

Если я использую 

table {
  width: 100%
}

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

table {
  width: 100%;
  display: block;
  overflow: auto;
}

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

Надеюсь, это легче понять на примере: 

body {
  font-family: sans-serif
}

h3 {
  margin-top: 30px;
}

p {
  font-style: italic;
  margin-top: 4px;
}

div#container {
  width: 600px;
  border: 2px solid blue;
  padding: 20px;
  overflow: hidden;
}

table {
  border: 1px solid red;
}

thead {
  background-color: #ddd;
}

td {
  padding: 5px;
}

table.fullwidth {
  width: 100%;
}

table.displayblock {
  width: 100%;
  display: block;
  overflow: auto;
}

table::-webkit-scrollbar {
  -webkit-appearance: none;
}

table::-webkit-scrollbar:horizontal {
  height: 11px;
}

table::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white;
  background-color: rgba(0, 0, 0, .5);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>

</head>

<body>

  <div id="container">

    <table class="fullwidth">
      <thead>
        <tr>
          <td>col1</td>
          <td>col2</td>
          <td>col3</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>a</td>
          <td>short</td>
          <td>table</td>
        </tr>
      </tbody>
    </table>
    <p>Tables with short contents shoould behave like this.</p>

    <table class="displayblock">
      <thead>
        <tr>
          <td>col1</td>
          <td>col2</td>
          <td>col3</td>
          <td>col4</td>
          <td>col5</td>
          <td>col6</td>
        </tr>
      </thead>
      <tr>
        <td>someverywidetable</td>
        <td>someverywidetable</td>
        <td>someverywidetable</td>
        <td>someverywidetable</td>
        <td>someverywidetable</td>
        <td>someverywidetable</td>
      </tr>
    </table>
    <p>Tables with long contents should behave like this.</p>
    

  </div>

</body>

</html>

В примере я использовал два разных стиля. Можно ли получить такой же эффект только одним стилем?

Спасибо!

1 Ответ

0 голосов
/ 12 апреля 2020

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

Затем я использовал flex box для позиционирования и выравнивания элементов внутри поля.

, если вы хотите предварительно определить для для мобильного вы должны использовать медиазапросы

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

h3 {
  margin-bottom: 0;
}

#container {
  width: 90vw;
  border: 2px solid blue;
  overflow: hidden;

  /*position container in the middle of page*/
  margin: 0 auto;
}

table {
  /*position center*/
  margin: 0 auto;

  border: 2px solid red;
  padding: 2.5vh 3vw;
  width: 84vw; /*container width - padding*/
}

tr {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: space-between;

  border: 2.5px solid black;
}

td {
  /*width 33% of parent*/
  width: 100%;

  /*center text in box*/
  display: flex;
  justify-content: center;
  align-items: center;

  /*fit inside box*/
  word-break: break-all;

  /*see table cells*/
  background: #fff333;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=1">
    <title></title>
  </head>
  <body>
    <div id="container">
      <table>
        <tr>
          <td>a</td>
          <td>short</td>
          <td>table</td>
        </tr>

        <tr>
          <td>someverywidetable</td>
          <td>someverywidetable</td>
          <td>someverywidetable</td>
        </tr>
        <tr>
          <td>a</td>
          <td>short</td>
          <td>table</td>
        </tr>
        <tr>
          <td>someverywidetable</td>
          <td>someverywidetable</td>
          <td>someverywidetable</td>
        </tr>
        <tr>
          <td>a</td>
          <td>short</td>
          <td>table</td>
        </tr>

        <tr>
          <td>someverywidetable</td>
          <td>someverywidetable</td>
          <td>someverywidetable</td>
        </tr>
      </table>

    </div>

  </body>

</html>
...