Отображение таблицы рядом с диапазоном фиксированной ширины

#html #css

#HTML #css

Вопрос:

У меня есть html <table> с динамической шириной (изменяется в зависимости от размера окна) и фиксированной шириной <span> (500 пикселей).

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

Я хочу сделать это только с помощью CSS (не js)

Я поиграл с CSS, но, похоже, это уменьшает ширину таблицы

HTML

 <div class='container'>
   <table class='table'>....</table>
   <span class='span'>....</span>
</div>

CSS

 .container {
   ......
}

.table {
  .....
}

.span {
   width: 500px;
   display: inline-block; //or block if neccessary
}

1. Единственный известный мне способ сделать это — использовать display: table-cell …

2. да, но должен ли я отображать «таблицу» как «ячейку таблицы»

3. Создайте jsfiddle, чтобы мы знали, что происходит

4. Нет, но вы могли бы обернуть его в div, который вы отображаете как ячейку таблицы…

Ответ №1:

Вы можете попробовать использовать table-layout свойство .container и span .

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

ДЕМОНСТРАЦИЯ

 span {
  display:table-cell;
  width:500px;
  border:solid;
}
table {
  border:solid;
  margin:0;
  width:100%;
}
.container {
  display:table;
  width:100%;
  table-layout:fixed;
}

Это должно сработать

из-за table-layout:fixed

и потому, что браузер должен сам создавать недостающий элемент (например, a tbody всегда создается в a <table> , когда отсутствует или когда в документе отсутствуют такие теги, как html или body ).

Ответ №2:

ДЕМОНСТРАЦИЯ

css

 body, html {
    margin:0;
    padding:0;
}
.container {
}
table {
    width: calc(100% - 500px);
    border-collapse: collapse;
    float: left;
}
/* Zebra striping */
 tr:nth-of-type(odd) {
    background: #eee;
}
th {
    background: #333;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
.span {
    display: inline-block;
    width: 500px;
    height: 100px;
    background: red;
}

HTML

 <div class='container'>
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>etc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table> <span class='span'>....</span>

</div>