Слишком много места между столбцами в таблице html

Question

У меня проблема с моей таблицей html / css. Если вы посмотрите на скриншоты ниже, таблица на маленьком экране идеальна (игнорируйте границы). Он идеально подходит с точки зрения пространства между текстовым и аудиопроигрывателем.

Когда вы смотрите на более широкий экран, разрыв между текстом и аудиоплеером слишком велик. Итак, мой вопрос, как это исправить? Я знаю, что могу установить меньшую ширину для первого столбца, но это может быть не очень хорошей идеей, если экран слишком маленький, что приводит к разбивке текста на две строки. Как будто я хочу, чтобы он закрывал промежуток на большом экране, но сохранял ту же функцию, которую он делает в настоящее время, когда экран уменьшается в размере.

<table style="width: 50%; table-layout: fixed; word-wrap: normal;">
    <tr>
      <td><strong>Call 1</strong></td>
      <td>
        <audio
        controls
        src="aud/1 (no filter).mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
      </td>

Answer 1

table { border:1px solid #ccc;}
audio { width:100%;}
td { width:50%;}

<table style="width: 100%; table-layout: fixed; word-wrap: normal;">
    <tr>
      <td><strong>Call 1</strong></td>
      <td>
        <audio
        controls
        src="aud/1 (no filter).mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
      </td>
      </tr>
</table>

Answer 2

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

Один подход состоит в том, чтобы дать вашему тексту font-size относительно ширины области просмотра.

Идеальной единицей для этого является vw - единица ширины области просмотра.

1vw равно до 1% от ширины области просмотра.

Так, например, здесь вы можете стилизовать несколько ваших <td> свойств, используя vw, например:

  height: 2vw;
  padding: 2vw;
  line-height: 4vw;
  font-size: 4vw;

Тогда , когда область просмотра расширяется и сужается, высота <td> и размер font будут увеличиваться и уменьшаться относительно области просмотра.

Рабочий пример:

body {
  background-color: rgb(25, 33, 44);
}

table {
  color: rgb(255, 255, 255);
  font-family: sans-serif;
  border: 1px solid rgb(223, 89, 67);
  border-collapse: collapse;
}

td {
  height: 2vw;
  padding: 2vw;
  line-height: 4vw;
  font-size: 4vw;
  border: 1px solid rgb(223, 89, 67);
}

audio {
  background-color: rgb(255, 0, 0);
  border-radius: 20px;
}

<table>
<tr>
<td><strong>Call 1</strong></td>
<td>
<audio controls src="aud/1 (no filter).mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</td>
</tr>
</table>

Answer 3

Вы можете использовать это column-width: auto; для кода CSS первого столбца, это обеспечит необходимое пространство ширины для самой длинной строки в первом столбце. Затем вы можете добавить padding-right, если хотите получить пробел между элементами и правой границей.

<table style="width: 50%; table-layout: fixed; word-wrap: normal;" border="1" border-collapse="collapse">
    <tr>
      <td style="column-width: auto; padding-left: 10px; padding-right: 20px"><strong>Call 1</strong></td>
      <td>
        <audio
        controls
        src="aud/1 (no filter).mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
      </td>

Надеюсь, этот ответ поможет вам.

Answer 4

table width вызывает проблему здесь. Вы можете указать ширину в меньшем процентном соотношении или ширину в pixels, чтобы ширина была одинаковой на экранах меньшего и большего размера. Помните, что ширина в процентах действует в зависимости от размера экрана.

См. Пример ниже, в котором я добавил ширину таблицы в fixed pixels: CODEPEN EXAMPLE