Некоторые аномалии с таблицей дел. Как убрать границу? - PullRequest
Новая
       3

Некоторые аномалии с таблицей дел. Как убрать границу?

0 голосов
/ 21 апреля 2020

Я работал с таблицей div и обнаружил несколько аномалий. 1. Текст в ячейках 1 и 4 перекрывается текстом в ячейках 2 и 5. (решается с помощью переноса слов: разбить все) 2. Строка с текстом 7 имеет черную рамку слева. 3. Строка с текстом 7 имеет ширину больше, чем остальные. Как сделать так, чтобы ячейки не перекрывались и не пересекались go друг с другом, слева от текста не было черной рамки и строки div одинаковой ширины? 

.divTable{
	display: table;
	width: 100%;
	table-layout: fixed;
}

.divTableRow {
    display: table-row;
	border-style: none;
}

.divTableCell {
	border: 0px solid #999999;
	display: table-cell;
	padding: 0px 0px;
	vertical-align: top;
    word-break: break-all;

}


div.blueTable {
  border: 0px solid #1C6EA4;
  background-color: yellow;
  width: 100%;

  text-align: left;

  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable  {
  border: 3px solid #FFFFFF;
    padding: 7px 7px 7px 7px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 100%;
}
.divTable.blueTable .divTableRow:nth-child(even) {

 border-bottom: 2px solid black;
 
}


.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableCell, .divTableHead { display: table-cell;}
.divTableBody { display: table-row-group;}
<div class="divTable blueTable" style="border: 1px solid #000;">
  <div class="divTableBody">
    <div class="divTableRow">

      <div class="divTableCell" style="width:10%">1 Text TextText TextText TextText Text</div>
      <div class="divTableCell" style="width:40%">2 Text Text Text TextText Text</div>
      <div class="divTableCell" style="width:50%">3 Text TextText TextText Text</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">4Text TextText TextText TextText Text</div>
      <div class="divTableCell">5Text TextText Text</div>
      <div class="divTableCell">6Text TextText TextText Text</div>
    </div>

    <div class="divTableRow"><div>7 texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div></div>
    <div class="divTableRow">

      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 21 апреля 2020

  1. Текст в ячейках 1 и 4 накладывается на текст в ячейках 2 и 5. (решается путем разбиения по словам: разбить все) == как вы его решили.

  2. строка с текстом 7 имеет черную рамку слева. == это из-за встроенного css style="border: 1px solid #000;", который вы дали div с классом class="divTable blueTable".

  3. Строка с текстом 7 имеет ширину больше, чем остальные == здесь в этой строке вам нужно добавить что-то вроде colspan, но вы не можете использовать здесь colspan, для этого я использовал display: table-caption вместо display: table-row

.divTable{
	display: table;
	width: 100%;
	table-layout: fixed;
}

.divTableRow {
    display: table-row;
	border-style: none;
}

.divTableCell {
	border: 0px solid #999999;
	display: table-cell;
	padding: 0px 0px;
	vertical-align: top;
    word-break: break-all;

}


div.blueTable {
  border: 0px solid #1C6EA4;
  background-color: yellow;
  width: 100%;

  text-align: left;

  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable  {
  border: 3px solid #FFFFFF;
    padding: 7px 7px 7px 7px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 100%;
}
.divTable.blueTable .divTableRow:nth-child(even) {

 border-bottom: 2px solid black;
 
}


.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableCell, .divTableHead { display: table-cell;}
.divTableBody { display: table-row-group;}

.divCaptionRow {
  display: table-caption;
  
}
<div class="divTable blueTable">
  <div class="divTableBody">
    <div class="divTableRow">

      <div class="divTableCell" style="width:10%">1 Text TextText TextText TextText Text</div>
      <div class="divTableCell" style="width:40%">2 Text Text Text TextText Text</div>
      <div class="divTableCell" style="width:50%">3 Text TextText TextText Text</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">4Text TextText TextText TextText Text</div>
      <div class="divTableCell">5Text TextText Text</div>
      <div class="divTableCell">6Text TextText TextText Text</div>
    </div>

    <div class="divCaptionRow"><div>7 texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div></div>
    <div class="divTableRow">

      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>
  </div>
</div>
...