Добавить границу строки в сетке с помощью border-collapse: отделить - PullRequest
Новая
       29

Добавить границу строки в сетке с помощью border-collapse: отделить

0 голосов
/ 27 февраля 2020

Я разработал сетку данных. Я предполагаю, что строки в этой сетке являются отдельными, поэтому я использовал border-collapse: Отдельный.

Моя проблема заключается в том, что с помощью этого я не могу добавить границу к линии.

Is есть способ добавить границу к строке и сохранить отдельные строки таблицы?

Пример - Stackblitz 

<dx-data-grid style="margin-top:50px" class="tableTask" [dataSource]="datas"
    [showColumnLines]="false" [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="true">
    <dxo-header-filter [visible]="true"></dxo-header-filter>
    <dxi-column dataField="ID" dataType="text" caption="ID"></dxi-column>
    <dxi-column dataField="Name" dataType="text" caption="Name"></dxi-column>
</dx-data-grid>

css

::ng-deep .tableTask .dx-datagrid-headers  {
letter-spacing: 0;
color: #4D4F5C !important;
font-weight: bold !important;
font-size: 13px !important;
background-color:#EDF3F9;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    border-radius: 8px 8px 0px 0px;
    height: 60px;
    line-height: 18px;
    border-bottom: none !important;
}

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 20px #BCBCCB47;
  border-radius: 8px;
  opacity: 1;
}

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
  line-height: 50px;
  height: 60px;
}

::ng-deep .tableTask .dx-datagrid-headers + .dx-datagrid-rowsview {
   border-top: 0 !important;
}

::ng-deep .tableTask .dx-datagrid-content .dx-datagrid-table {
  border-collapse: separate !important;
  border-spacing: 0px 16px !important;
}

::ng-deep .tableTask .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: none;
}

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Если вы хотите продолжать использовать border-collapse: separate.

Вы можете просто добавить border к каждому td каждой строки : 

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td {
  border-bottom: 1px solid red;
}

Добавьте приведенный выше код в конце вашего CSS.

И если вы хотите добавить полную границу к вашей строке, вы можете использовать это: 

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td{
  border-bottom: 1px solid red;
  border-top: 1px solid red;
} 
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:first-child {
  border-left: 1px solid red !important;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:last-child {
  border-right: 1px solid red;
}

Я добавил !important к границе слева, потому что уже есть некоторые CSS.

0 голосов
/ 27 февраля 2020

Это сложно, так как вы не можете добавить границу к tr таблицы.

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

Влияние 'position :lative' на группу строк таблицы, группу заголовков таблицы, группу нижнего колонтитула таблицы, строку таблицы, группу столбцов таблицы, таблицу-столбец, элементы table-cell и table-caption не определены.

Таким образом, вы можете попробовать "взломать", чтобы добавить transform: scale(1); к вашим строкам, чтобы это работало. Как это: 

table {border-collapse:separate;border-spacing: 10px;}
td {}
tr {position:relative;transform: scale(1);}
tr:after  {
  content:'';
  display:block;
  width:100%;
  height:1px;
  background-color:#000;
  position:absolute;
  bottom:0;
  left:0;
  
  }
<table>
  <tr>
    <td>dasdasd</td>
    <td>dasda</td>
    <td>asdasda</td>
  </tr>
   <tr>
    <td>dasdasd</td>
    <td>dasda</td>
    <td>asdasda</td>
  </tr> <tr>
    <td>dasdasd</td>
    <td>dasda</td>
    <td>asdasda</td>
  </tr>
</table>

Однако я никогда не буду рекомендовать использование css хаков в любой сети.

...