Выравнивание текста в строке таблицы

Question

Как выровнять элементы таблицы, как на рисунке ниже?

Я использую таблицу без границ. Мой проект в React, но таблица реализована в HTML. Вот CSS:

& .activity-table-top{
table {
  text-align: left;
  border-collapse: collapse;
}
th {
  Color:black;
  font-weight: normal;
}
td {
  font-size: 20px;
  Color:black;
  font-weight: bold;
}
th, td {
  width:900px;
  padding:6px;
}

Структура таблицы:

<table>
  <tr>
    <th></th>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

Answer 1

Будет ли это работать? Вы можете изменить шрифт, используя CSS

.custom{
  font-weight: bold;

}

<table>

<tr>
<td>Todays Targets (05/01/2020)</td>
</tr>

<tr>
<td class="custom">0/15 Leads Handled</td>
</tr>

<tr>
<td class="custom">0/0 Sales</td>
</tr>

<tr>
<td class="custom">0/70% Close Ratio</td>
</tr>
</table>

Answer 2

Если вы также можете разделить таблицу, то это ответ:

codepen: https://codepen.io/Rishab2019/pen/VwvMWrO

  div.blueTable {
  background-color: #1C6EA4;
  text-align: left;
  border-collapse: collapse;
  border:none;
  width:300px;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  
  padding: 6px;
  border:none;
  width:300px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 20px;
  width: 130px;
  font-weight:bold;
}
.divTable.blueTable .divTableRow:nth-child(even) {
  background: 1C6EA4;
}

.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: normal;
  color: black;
  text-align:center;
  
}
.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}


.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableBody { display: table-row-group;}

<div class="divTable blueTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Today's targets (05/01/2020)</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">0/15</div>
<div class="divTableCell">Leads Handled</div>
</div>
<div class="divTableRow">
<div class="divTableCell">0/0</div>
<div class="divTableCell">Sales</div>
</div>
<div class="divTableRow">
<div class="divTableCell">0/70%</div>
<div class="divTableCell">Close Ratio</div>
</div>
<div class="divTableRow">
<div class="divTableCell">0/40%</div>
<div class="divTableCell">Rebate KPI</div>
</div>
<div class="divTableRow">
<div class="divTableCell">0/80%</div>
<div class="divTableCell">Email KPI</div>
</div>
</div>
</div>

Или, если вы хотите использовать табличный тег, то это будет работать:

codepen: https://codepen.io/Rishab2019/pen/oNjGeaz

.mytable{
  display:table;
  width:270px;
  background-color:#ecece2;
}  

td{
  font-weight:bold;
  font-size:20px;
  Color:black;
  padding:6px;
  width:1400px;

 
}
   .heading{
  font-weight:normal;
  text-align:center;
  Color:black;
  display:table-cell;
  width:270px;
  background-color:#ecece2;
}

<table class="mytable">
  <tr class="heading">
    <h3 class="heading">Today's targets (05/01/2020)</h3>
    </tr>
  <tr class="row">
    <td>0/15</td>
    <td>Leads Handled</td>
  </tr>
  <tr class="row">
    <td>0/0</td>
    <td>Sales</td>
  </tr>
  <tr class="row">
    <td>0/70%</td>
    <td>Close Ratio</td>
  </tr>
  <tr class="row">
    <td>0/40%</td>
    <td>Rebate KPI</td>
  </tr>
  <tr class="row">
    <td>0/80%</td>
    <td>Email KPI</td>
  </tr>
</table>

Answer 3

Вы можете использовать 5 столбцов.

<tr>
    <td>11</td>
    <td>/</td>
    <td>15</td>
    <td></td>
    <td>Leads Handled</td>
</tr>

Мне было удобно с этой практикой, чтобы выполнить свою работу. Надеюсь, вы нашли то, что хотите.