usfca-data-table/data-table/table.css

data table test

.dt_table-entry-field{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;

  width: 224px;
  height: 46px;

  background: #FFFFFF;
  border: 2px solid #D9D9D9;
  box-sizing: border-box;
  border-radius: 8px;
}

.dt_left-panel-button{
  min-width: 200px;
  height: 46px;
  background: #FFFFFF;
  border: 2px solid #D9D9D9;
  box-sizing: border-box;
  border-radius: 8px;

  flex: none;
  order: 3;
  align-self: stretch;
  flex-grow: 0;
  margin: 1px 0;
}

.dt_inner-table{
  width: 659px;
  height: 228px;
  margin-top: 30px;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-collapse: collapse;
}

.dt_cell{
  padding: 15px;
  border-width: 1px;
  border-style: solid;
}

.dt_cell-input{
  display: inline-block;
  flex-direction: row;
  align-items: center;
  padding: 12px 2px;

  width: 75px;
  height: 25px;

  background: #FFFFFF;
  border: 2px solid #D9D9D9;
  box-sizing: border-box;
  border-radius: 8px;
}

.dt_invalid-cell{
  padding: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: darkred;
  background-color: #FF7F7F;
}

.dt_error-message{
  word-wrap: normal;
  color: darkred;
}

.dt_cell-label{
  white-space: nowrap;
}

.dt_cell-label::after{
  content: "\a";
  white-space: pre;
}