Предотвращение <pre>от упаковки внутри стола

Question

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

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

.main-content {
  max-width: 800px;
  border: 1px solid red;
}
pre {
  overflow: auto;
}

  
    
      
        Property
        Description
      
    
    
      
        name
        

          Foo bar talking about some random things related to our code here in the paragraph:
          // some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)

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

.main-content {
  max-width: 800px;
  border: 1px solid red;
}
table {
  table-layout: fixed;
  width: 100%;
}
th:first-of-type {
  width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
} 
pre {
  overflow: auto;
}

  
    
      
        Property
        Description
      
    
    
      
        name
        

          Foo bar talking about some random things related to our code here in the paragraph:
          // some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)

Любые идеи о том, как заставить работать оба, сохраняя при этом макет таблицы? Я знаю, как это сделать с помощью других методов, таких как grid и flexbox, я не об этом спрашиваю.

Answer 1

Вы можете рассмотреть width:0;min-width:100%; трюк на pre. Идея состоит в том, что width:0 отключит вклад pre при определении ширины контейнера, тогда min-width:100% заставит его заполнить все пространство:

.main-content {
  max-width: 800px;
  border: 1px solid red;
}

th:first-of-type {
  white-space:nowrap;
} 
pre {
  overflow: auto;
  width:0;
  min-width:100%;
}

  
    
      
        Property
        Description
      
    
    
      
        name
        

          Foo bar talking about some random things related to our code here in the paragraph:
          // some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)

Вопрос по теме: Как сопоставить ширину текст по ширине динамически изменяемого изображения?

Answer 2

Единственный способ сделать это - обернуть <pre> в <div> с помощью overflow: auto и установить ячейку на display: grid

.main-content {
  max-width: 800px;
  border: 1px solid red;
}

table {
  table-layout: auto;
  width: 100%;
}

.config-name {
  white-space: nowrap;
}

.config-description {
  display: grid;
}

.config-description div {
  overflow: auto;
}

  
    
      
        Property
        Description
      
    
    
      
        name
        

          Foo bar talking about some random things related to our code here in the paragraph:
          
            // some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)

длинное имя свойства

Просто еще одно описание, без