Можно ли сделать первые два столбца таблицы такими же широкими, как их содержимое, а третий столбец займет оставшееся пространство? - PullRequest
Новая
       39

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

0 голосов
/ 09 июля 2019

Все еще не могу создать правильный чат; /

Мои требования просты: в первом столбце указывается метка времени, во втором столбце - ник автора плаката, в последнем столбце - содержание сообщения. Поэтому: первые два столбца должны занимать столько места, сколько необходимо, чтобы избежать разрывов строк, но не более, чтобы не тратить пространство; в то время как 3-й столбец должен занимать оставшееся пространство, но не более, форсируя разрывы строк при необходимости.

Однако при этом оба макета таблицы - auto и fixed - терпят неудачу.

table-layout: auto; разбивает строки в первых двух столбцах и, если в качестве содержимого сообщения вводится одно огромное слово, ненормально растягивает таблицу, несмотря на overflow-wrap: break-word: 

.chatbox {
  display: table;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.content {
  overflow-wrap: break-word;
}
<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Some Longer Nick</span>
    <span class="content">I can see linebreaks in the preceeding two columns and I'd like to avoid them.</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick</span>
    <span class="content">AnAbsurdlyLongWordThatCompletelyAndUtterlyDisruptsTheLayoutOfMyChatbox</span>
  </li>
</ul>

table-layout: fixed; не позволяет мне задавать ширину первых двух столбцов в зависимости от их содержимого: 

body {
  width: 500px;
}

.chatbox {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.content {
  overflow-wrap: break-word;
}
<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Nick1</span>
    <span class="content">Too much blank space surrounding the timestamp and authors' nicks do not leave enough space for message contents</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick2</span>
    <span class="content">To some extend I could remedy this by explicitely setting column widths, however, this would obviously not adapt to varying lengths of nicks. Only short nicks talking would again waste space while longer nicks could break</span>
  </li>
</ul>

Можно ли делать то, что я хочу, используя display: table?

1 Ответ

1 голос
/ 09 июля 2019

Рассмотрим white-space: nowrap; с вами первое решение 

.chatbox {
  display: table;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.timestamp, .author {
    white-space: nowrap;
}
.content {
  overflow-wrap: break-word;
  word-break:break-word;
}
<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Some Longer Nick</span>
    <span class="content">I can see linebreaks in the preceeding two columns and I'd like to avoid them.</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick</span>
    <span class="content">AnAbsurdlyLongWordThatCompletelyAndUtterlyDisruptsTheLayoutOfMyChatbox</span>
  </li>
</ul>
...