HTML <table>не помещается в контейнер (всегда больше) - PullRequest
Новая
       2

HTML <table>не помещается в контейнер (всегда больше)

0 голосов
/ 30 января 2019

У меня есть следующая структура HTML / CSS: 

table {
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

#quad-main {
  position: absolute;
  top: 2.5%;
  right: 2.5%;
  width: 95%;
  height: 20%;
  border: 1px #000 solid;
}

.left-align {
  text-align: left;
}

.logo-img-style {
  width: 100%;
  height: 100%;
}

#lbl-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div id="quad-main">
  <table>
    <tr>
      <th class="left-align">
        <div class="logo-img-style">
          <img id="lbl-logo" src="a_img.png" />
        </div>
      </th>
    </tr>
  </table>
</div>

Проблема заключается в следующем: почему таблица больше, чем основной div ("quad-main")?
Если фиксированные четырехугольные размеры (иони есть), и таблица имеет 100% w и 100% h (что означает, что они полностью соответствуют родительским измерениям), почему в моем графическом представлении таблица выглядит больше, чем div?

Все дочерние элементы таблицытакже имеет высоту 100%, поэтому они не должны быть больше таблицы, которая, теоретически, не должна быть больше, чем первый div.

Кроме того, установка max-width и max-height ничего не изменит.

Есть идеи?

Ответы [ 4 ]

0 голосов
/ 30 января 2019

Таблица также имеет border-spacing вокруг ячеек таблицы и padding внутри.Установите их в 0, и ширина будет равна ширине контейнера. 

table {
  table-layout: fixed;
  width: 100%;
  height: 100%;
  padding:0;
  border-spacing:0;    /* new */
}

#quad-main {
  position: absolute;
  top: 2.5%;
  right: 2.5%;
  width: 95%;
  height: 20%;
  border: 1px #000 solid;
}

.left-align {
  text-align: left;
  padding:0;           /* new */
}

.logo-img-style {
  width: 100%;
  height: 100%;
}

#lbl-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div id="quad-main">
  <table>
    <tr>
      <th class="left-align">
        <div class="logo-img-style">
          <img id="lbl-logo" src="a_img.png" />
        </div>
      </th>
    </tr>
  </table>
</div>
0 голосов
/ 30 января 2019

Попробуйте это, я думаю, что это полное использование для вас.Вы должны задать макет таблицы: фиксированный; ширина: 100%; высота: 100%; свойства для таблицы tr класса,См. Ниже. 

table tr {
  table-layout: fixed;
  width: 100%;
  height: 100%;
}


table tr {
    table-layout: fixed;
    width: 100%;
    height: 100%;
}
#quad-main {
    position: absolute;
    top: 2.5%; right: 2.5%;
    width: 95%; height: 20%;
    border: 1px #000 solid;
}

.left-align {
    text-align: left;
}

.logo-img-style {
    width: 100%; height: 100%;
}

#lbl-logo {
    width: 100%; height: 100%;
    object-fit: cover;
}
<div id = "quad-main">
    <table>
        <tr>
            <th class = "left-align">
                <div class = "logo-img-style">
                    <img id = "lbl-logo" src = "a_img.png"></img>
                </div>
            </th>
        </tr>
    </table>
</div>
0 голосов
/ 30 января 2019 
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
table tbody {
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

#quad-main {
    position: absolute;
    top: 2.5%; right: 2.5% bottom:2.5%;
    width: 95%; height: 20%;
    border: 1px #000 solid;
}

.left-align {
    text-align: left;
}

.logo-img-style {
    width: 100%; height: 100%;
}

#lbl-logo {
    width: 100%; height:100px;
    object-fit: contain;
}
</style>
</head>
<body>
<div id = "quad-main">
    <table>
        <tr>
            <th class = "left-align">
                <div class = "logo-img-style">
                    <img id = "lbl-logo" src = "https://perureports.com/wp-content/uploads/2018/02/travel-2.jpg"></img>
                </div>
            </th>
        </tr>
    </table>
</div>
</body>
</html>

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

0 голосов
/ 30 января 2019

попробуйте с этим

.tabedescp {

height: 100%;
width: 100%;
float: left;

}

.table, th, td {

border: 1px solid black;
border-collapse: collapse;
border-spacing: 0px;
width: 210px;
table-layout: fixed;

}

Счастливого кодирования !!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...