Флажок "Расширяемый текст CSS в ячейке таблицы" отображается - PullRequest
Новая
       24

Флажок "Расширяемый текст CSS в ячейке таблицы" отображается

0 голосов
/ 08 июня 2018

Я использовал трюк CSS, чтобы скрыть флажок для расширяемого текста в ячейке таблицы CSS, однако флажок показывает, когда он должен быть скрыт (см. Рис.).Код «просмотреть исходный код» из FireFox указан ниже точно так же, как он был записан в файл.Любые предложения по избавлению от флажка?Текст тоже не расширяется, поэтому я думаю что-то не так? 

<!DOCTYPE html><html><body>
<style type="text/css">
 table.gridtable {
    font-family: Arial, Helvetica,sans-serif;
    font-size:20px;
    color: black;
    border-width:  2px;
    border-color: Black
    border-collapse: collapse;
    border-style: solid;
}
 table.gridtable th {
    color: Black;
    border-width: 0px;
    padding: 8px;
    border-style: solid;
    border-color: black;
    background-color: #EEEEFF;
}
 table.gridtable tr {
    color: Black;
}
 table.gridtable tr:nth-child(odd) {
  background-color: #EEEEFF;
}
 table.gridtable tr:nth-child(even) {
  background-color: White
}
 table.gridtable td {
    border-width: 0px;
    padding: 8px;
    border-style: solid;
    border-Color: #8080FF;
}
 .content{
  height:  15px;
  width:100px;
  overflow: hidden;
  text-overflow: ellipsis
}
Input()[type='checkbox'] { visibility: hidden; position: absolute; }
Input()[type='checkbox']:checked + .content { height: auto; width: auto;}
</style>
<table class="gridtable" Align=center>
<tr><th>Group</th><th>Indication</th></tr>
<tr>
<td align="center">approved</td><td><label><input type ="checkbox" /><div class="content"><span class="hidden">
Indicated for the maintenance of ....
</span></div></label></td></tr>
</table></body></html>

enter image description here

Ответы [ 4 ]

0 голосов
/ 09 июня 2018

@ zerOOne, на самом деле у меня есть несколько ячеек, которые требуют скрытого перекрытия, и с несколькими ячейками в примере ниже, только первая ячейка может расширяться / сокращаться: 

<!DOCTYPE html><html><body>
<style type="text/css">
table.gridtable {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  border-width: 2px;
  border-color: Black;
  border-collapse: collapse;
  border-style: solid;
}

table.gridtable th {
  color: Black;
  border-width: 0px;
  padding: 8px;
  border-style: solid;
  border-color: black;
  background-color: #EEEEFF;
}

table.gridtable tr {
  color: Black;
}

table.gridtable tr:nth-child(odd) {
  background-color: #EEEEFF;
}

table.gridtable tr:nth-child(even) {
  background-color: White
}

table.gridtable td {
  border-width: 0px;
  padding: 8px;
  border-style: solid;
  border-Color: #8080FF;
}

label.content {
  display: table;
  table-layout: fixed;
  cursor: pointer;
}

#chx {
  display: none
}

.hidden {
  max-height: 50px;
  max-width: 100px;
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: .7s ease-out;
}

#chx:checked+.content .hidden {
  max-height: 500px;
  max-width: 1800px;
  transition: .7s ease;
  /* Remove white-space if you want the animation go horizontal */
  white-space: normal;
  overflow: visible;
}
</style>


  <table class="gridtable">
    <tr>
      <th>Group</th>
      <th>Indication</th>
      <th>Indication</th>
      <th>Indication</th>
      <th>Indication</th>
    </tr>
    <tr>
      <td>approved</td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
    </tr>
  </table>
</body>

</html>
0 голосов
/ 09 июня 2018

CSS Solution

Многоточие…

Когда вы используете многоточие для содержимого таблицы, вам необходимо настроить элементы следующим образом:

  • 2 контейнера внутри <td> один снаружи (.content), а другой (.hidden) будет внутри внешнего контейнера.Текст будет в .hidden.

  • Для внешнего контейнера необходимо следующее (label.content): 

    display: table;
table-layout: fixed;

  • Внутренний контейнернеобходимо следующее (b.hidden): 

    display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Ярлыки и флажки

Лучший способ скрыть флажок - установить еговыше в DOM, чем предполагалось, поэтому каскад обеспечивает контроль и затем использует display:none.С display:none флажок не мешает другим элементам.Элементы, которые являются visibility или opacity, все еще существуют в обычном потоке документов.

С установленным флажком, но не активным (пользователь не может его увидеть), используйте <label for='checkboxID'>.Атрибут [for] со значением #id флажка позволяет <label> быть флажком (при щелчке на нем также будет установлен флажок)

Slide IN / OUT

Установленное поведение:

  • label.content нажат
  • input[type=checkbox]#chx теперь проверено
  • b.hidden 2-е состояние срабатывает
  • label.content снова нажимается
  • input[type=checkbox]#chx теперь не проверено
  • b.hidden возвращается в 1-е состояние

b.hidden 1-е состояние равноследующее: 

 max-height: 50px;
 max-width: 200px;
 transition: .7s ease-out;

b.hidden 2-е состояние выглядит следующим образом: 

 max-height: 500px;
 max-width: 1800px;
 transition: .7s ease;
 white-space: normal;
 overflow: visible;

Демо 

table.gridtable {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  border-width: 2px;
  border-color: Black;
  border-collapse: collapse;
  border-style: solid;
  width: 75%;
}

table.gridtable th {
  color: Black;
  border-width: 0px;
  padding: 8px;
  border-style: solid;
  border-color: black;
  background-color: #EEEEFF;
}

table.gridtable tr {
  color: Black;
}

table.gridtable tr:nth-child(odd) {
  background-color: #EEEEFF;
}

table.gridtable tr:nth-child(even) {
  background-color: White
}

table.gridtable td {
  border-width: 0px;
  padding: 8px;
  border-style: solid;
  border-Color: #8080FF;
  width: 50%;
}

label.content {
  display: table;
  table-layout: fixed;
  cursor: pointer;
}

#chx {
  display: none
}

b.hidden {
  max-height: 50px;
  max-width: 200px;
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: .7s ease-out;
}

#chx:checked+.content .hidden {
  max-height: 500px;
  max-width: 1800px;
  transition: .7s ease;
  /* Remove white-space if you want the animation go horizontal */
  white-space: normal;
  overflow: visible;
}
<!DOCTYPE html>
<html>

<body>
  <style>

  </style>

  <table class="gridtable">
    <tr>
      <th>Group</th>
      <th>Indication</th>
    </tr>
    <tr>
      <td>approved</td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <b class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</b>
</label>
      </td>
    </tr>
  </table>
</body>

</html>
0 голосов
/ 09 июня 2018

@ Crazymatt, ниже решение, которое работало.Я удалил () в соответствии с вашим предложением, но пришлось оставить тег label, так как без тега label он не будет работать.(см. code , где я взял пример CSS-кода, который использует тег label.) Кроме того, мне понадобилась высота и я сделал 30px.

<!DOCTYPE html><html><body>
<style type="text/css">
 table.gridtable {
    font-family: Arial, Helvetica,sans-serif;
    font-size:20px;
    color: black;
    border-width:  2px;
    border-color: Black
    border-collapse: collapse;
    border-style: solid;
}
 table.gridtable th {
    color: Black;
    border-width: 0px;
    padding: 8px;
    border-style: solid;
    border-color: black;
    background-color: #EEEEFF;
}
 table.gridtable tr {
    color: Black;
}
 table.gridtable tr:nth-child(odd) {
  background-color: #EEEEFF;
}
 table.gridtable tr:nth-child(even) {
  background-color: White
}
 table.gridtable td {
 max-width:  100px;
 overflow: hidden;
 Text-overflow: ellipsis
 white-Space() nowrap;
    border-width:   0px;
    padding: 8px;
    border-style: solid;
    border-Color: #8080FF;
}
 .content{
  height: 30px;
  width: 100px;
  overflow: hidden;
  Text-overflow: ellipsis
}
Input[type='checkbox'] { visibility: hidden; position: absolute; }
Input[type='checkbox']:checked + .content { height: auto; width: auto;}
</style>
<table class="gridtable" Align=center>
<tr><th>Group</th><th>Indication</th></tr>
<tr>
<td align="center">approved</td><td><label><input type ="checkbox" /><div class="content"><span class="hidden">
Indicated for the maintenance ... very long text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
</span></div></label></td>
</tr> 
</table></body></html>
0 голосов
/ 08 июня 2018

В вашем коде у вас есть Input()[type='checkbox'], который следует изменить на input[type='checkbox'].Так что если вы удалите (), и оно должно работать.

Также я заметил, что ваш текст обрезается в одной из ячеек таблицы, и вы можете удалить height: 15px в классе .content, чтобы отображался весь текст.

Также также просто замечание, но у вас есть div внутри тега label, и, насколько мне известно, это не очень хорошая HTML-структура, и я предлагаю удалить label, так как это не похоже на его использование.Надеюсь, это поможет.

...