Table выходит за границу родительского блока

Question

`

                <table class="table table-bordered table-striped">
                    <tbody>
                    <tr>
                        <td>
                            <p>Доставка</p>
                        </td>
                        <td>
                            <p>Регион доставки</p>
                        </td>
                        <td>
                            <p>Стоимость доставки, рубли</p>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">
                            <p>Платная</p>
                        </td>
                        <td>
                            <p>Санкт-Петербург</p>
                        </td>
                        <td>
                            <p>450</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>Ленинградская область</p>
                        </td>
                        <td>
                            <p>Индивидуально</p>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>`[![Таблица выходит за границы блока][1]][1]

Как сделать так чтобы таблица имела ту же ширину которую имеет блок col-12 ? Указывал стили width: 100% для таблицы не помогло.

.table-responsive не предлагать, там появляется прокрутка, а мне она не нужна Помогите пожалуйста

Answer 1

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

.container { width: 80px; border: 1px solid red }
table { border-spacing: 0 }
td { 
    float: left;
    width: 40px;
    padding:0;
    word-wrap: break-word; }

<div class="container">
<table><tr><td>1111111111111111111</td><td>222</td></tr></table>
</div>

Answer 2

Попробуйте правило:

table{
  max-width:100%;
}

Возможно я Вас неверно понял. Вот html:

<div class="container">
  <div class="row">
    <div class="col-12">
      <table class="table table-bordered table-striped">
                    <tbody>
                    <tr>
                        <td>
                            <p>Доставка</p>
                        </td>
                        <td>
                            <p>Регион доставки</p>
                        </td>
                        <td>
                            <p>Стоимость доставки, рубли</p>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">
                            <p>Платная</p>
                        </td>
                        <td>
                            <p>Санкт-Петербург</p>
                        </td>
                        <td>
                            <p>450</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>Ленинградская область</p>
                        </td>
                        <td>
                            <p>Индивидуально</p>
                        </td>
                    </tr>
                    </tbody>
                </table>
    </div>
  </div>
</div>


            </div>

Вот CSS:

table{
  max-width:100%;
}

Answer 3

я может и вообще пошёл не в ту сторону но поиграйся с overflow

Answer 4

Решил проблему с помощью @media запроса где выставил разные размеры шрифтов на разных разрешениях экрана и теперь все красиво как надо.

БЛОГ НА HUSL

Table выходит за границу родительского блока

Ответы (4 шт):