CSS - 100 высот в табличке - PullRequest
Новая
       9

CSS - 100 высот в табличке

0 голосов
/ 28 ноября 2018

У меня есть ячейка стола различной высоты.Я хочу иметь 1 или несколько интервалов в последней ячейке с некоторыми требованиями:

  • высота должна быть равна полной высоте строки, наиболее важна
  • ширинадолжен быть равен пролетам.Так что точно подходит справа и без пробелов слева.

Не могу найти решение.

CSS: 

* {
  box-sizing:border-box;
}

table {
  width:100%;
}
td { border:1px solid blue; }
input {
    height:50px;
}
.buttons {
  width:1px;
  white-space:nowrap;
}
.button {
    padding:5px 20px;
    background:red;
    display:inline-block;
}

И HTML: 

<table>
    <tr>
        <td><input value="I have height of 50px" /></td>
        <td class="buttons">
            <span class="button" title="I have width of 25px">+</span>
            <span class="button" title="I have width of 25px">+</span>
        </td>
    </tr>
</table>

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

http://jsfiddle.net/70a6q5kz/3/

- редактировать Решение Я нашел это решение: Css: 

table { height:100%; }
.buttons { height:100% }

Полное решение: http://jsfiddle.net/70a6q5kz/11/

Ответы [ 3 ]

0 голосов
/ 28 ноября 2018

В CSS вы можете удалить отступы из td, создать .button: last-of-type и вставить в него поле margin-right: -1px 

* {
  box-sizing:border-box;
}

table {
  width:100%;
}
td { 
  border:1px solid blue;
  padding: 0; /********************************/
 }
input {
    height:50px;
}
.buttons {
  width:1px;
  white-space:nowrap;
  padding: 0;
}
.button:last-of-type{ /*************************/
  margin-right:-1px;  /*************************/
}                     /*************************/
.button {
    padding:15px 20px;
    background:blue;
    display:inline-block;
    height:50px;
}

HTML может остаться прежним

0 голосов
/ 28 ноября 2018

Возможное решение Я нашел это как возможное решение.Простыми словами: Css: 

table { height:100%; }
.buttons { height:100% }

Полное решение: http://jsfiddle.net/70a6q5kz/11/ Работает в IE 11, FF и Chrome

0 голосов
/ 28 ноября 2018

Вы могли бы что-то сделать с flex.Вам также необходимо удалить начальные padding из td s.

Проверочный фрагмент: 

* {
  box-sizing: border-box;
}

table {
  width: 100%;
}

td {
  border: 1px solid blue;
  padding: 0; /* remove initial padding */
}

input {
  height: 50px;
}

.buttons {
  display: flex;
  white-space: nowrap;
}

.button {
  flex: auto;
  width: 25px;
  background: red;
  text-align: center;
}
<table>
  <tr>
    <td><input value="I have height of 50px" /></td>
    <td>
      <div class="buttons">
        <span class="button" title="I have width of 25px">+</span>
        <span class="button" title="I have width of 25px">+</span>
      </div>
    </td>
  </tr>
</table>
...