How do I number my table with each number colspanned to the first cell of each row?-CodePudding

I have a leaderboard and everything in my table body is pushed one to the right. I am trying to colspan the first number in each row with the player name. Since the number gets inserted into the table from my CSS file is there any way I can colspan in CSS? I have tried to colspan with negative numbers in the HTML file but that failed to work. I am pretty new to HTML and CSS so sorry if this is a stupid question any help would be greatly appreciated

.bodyy{
    background-color: rgb(146, 144, 144);
    font-family: 'Open Sans', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    
}

 .table-style{
    width: 40%;
     margin: 50px auto;
    background-color: white;
    
    border-collapse:collapse;
    border-spacing: 1rem;
    
    
}

.table-style thead tr td{
    border:none;
    
    
}

table tbody {
    counter-reset: rowNumber;
  }
  
  table tbody tr::before {
    display: table-cell;
    counter-increment: rowNumber;
    content: counter(rowNumber) "";
    
  }

 .head-style{
    background-color: black;
    color: white;
    padding-bottom: 30px;
    
    
    
}

.body-style{
    
    border: solid 2px lightgrey;
    border-top: none;

    


}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Stats</title>
        

        <link rel="stylesheet" type="text/css"  href="styles.css">
    </head>

<body  >
    <table  border= "1" cellpadding="10px">
        
        <thead >
            <tr>
                <td>Player</td>
                <td>PT</td>
                <td>G</td>
                <td>A</td>
                <td>HITS</td>
                <td>GP</td>
            </tr>
        </thead>
        <tbody  >
            <tr>
                <td>Player1</td>
                <td>2</td>
                <td>1</td>
                <td>1</td>
                <td>10</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Player2</td>
                <td>1</td>
                <td>1</td>
                <td>0</td>
                <td>5</td>
                <td>2</td>
            </tr>

            <tr>
                <td>Player3</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>2</td>
            </tr>
            </tbody>
    </table>
</body>

</html>

CodePudding user response：

UPDATED based on clarifications on comments

You need to tell the header column that it will occupy more than one column. In this case, it will be the width of 2 columns. Like this:

<th colspan="2">Player</th>

Update 2

To remove the line between the number and the first column, use CSS similar to this:

table tbody tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) "";
  border-right: 0;
  border-top: 1px solid white;
  border-bottom: 1px solid lightgrey;
  vertical-align: middle;
}

table tbody tr td{
  border-left: 0px;
}

See updated demo:

.table-style {
  width: 40%;
  margin: 50px auto;
  background-color: white;
  border-collapse: collapse;
  border-spacing: 1rem;  
}

.table-style thead tr th {
  border: none;
}

table tbody {
  counter-reset: rowNumber;
}

table tbody tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) "";
  border-right: 0;
  border-top: 1px solid white;
  border-bottom: 1px solid lightgrey;
  vertical-align: middle;
}

table tbody tr td{
  border-left: 0px;
}

.head-style {
  background-color: black;
  color: white;
  padding-bottom: 30px;
}

.body-style {
  border: solid 2px lightgrey;
  border-top: none;
}

<table  border="1" cellpadding="10px">

  <thead >
    <tr>
      <th colspan="2">Player</th>
      <th>PT</th>
      <th>G</th>
      <th>A</th>
      <th>HITS</th>
      <th>GP</th>
    </tr>
  </thead>
  <tbody >
    <tr>
      <td>Player1</td>
      <td>2</td>
      <td>1</td>
      <td>1</td>
      <td>10</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Player2</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>5</td>
      <td>2</td>
    </tr>

    <tr>
      <td>Player3</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>2</td>
    </tr>
  </tbody>
</table>