Cieńszy jeden róg hedera i dziwna przerwa w dolnej belce w tabeli. CSS/HTML

Question

W trakcie tworzenia bordera z zaokrąglonymi rogami dla table headera powstały 2 problemy:

1. W lewym dolnym rogu border jest cieńszy niż w pozostałych, mimo, że został utworzony jak one. Chciałbym by wyglądały tak samo, z taką samą grubością.
2. Powstała przerwa w dolnej części między 2 kolumnami. 

CSS:

tableFixHead thead th {
    position: sticky;
    top: 0;
}
 
table {
    border-collapse: collapse;
    width: 100%;
}
 
th, td {
    padding: 8px 16px;
}
 
th {
    background: #2F3336;
}
 
.tableFixHead thead th {
    position: sticky;
    top: 0;
}
 
.tableFixHead th {
    box-shadow: inset 0px 2px #fff, 0px 2px #fff; 
}
 
table th:first-child {
    border-radius: 5px 0 0 5px;
    box-shadow: inset 2px 2px #fff, 2px 2px #fff; 
}
 
table th:last-child {
    border-radius: 0 5px 5px 0;
    box-shadow: inset 0px 2px #fff, 1px 2px #fff;
}

 

HTML:

 <div id="itemTable" class="text-center tableFixHead">

            <table class="text-light text-center">
                <thead>
                    <tr>
                        <th scope="row">Id</th>
                        <th scope="row">Nazwa</th>
                        <th scope="row">Rodzaj</th>
                        <th scope="row">Siła</th>
                        <th scope="row">PA</th>
                        <th scope="row">E</th>
                        <th scope="row">U</th>
                    </tr>
                </thead>
                
                <tbody>
                
                    ...
                    
                </tbody>
            </table>
</div>

Answer 1

Czy o to Tobie chodziło?  

<div id="itemTable" class="text-center tableFixHead">
  <table class="text-light text-center">
    <thead>
      <tr>
        <th scope="row">Id</th>
        <th scope="row">Nazwa</th>
        <th scope="row">Rodzaj</th>
        <th scope="row">Siła</th>
        <th scope="row">PA</th>
        <th scope="row">E</th>
        <th scope="row">U</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Nazwa 1</td>
        <td>Rodzaj 1</td>
        <td>Siła 1</td>
        <td>PA 1</td>
        <td>E 1</td>
        <td>U 1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Nazwa 2</td>
        <td >Rodzaj 2</td>
        <td>Siła 2</td>
        <td>PA 2</td>
        <td>E 2</td>
        <td>U 2</td>
      </tr>
    </tbody>
  </table>  
</div>

* {
  box-sizing: border-box;
}

:root {
  --border-thead-width: 2px;
  --border-thead-color: #fff;
  --border-thead-radius: 5px;
}

body {
  background-color: black;
}

.tableFixHead table {
  margin: 0px auto;
  width: 100%;
  color: white;
  border-spacing: 0;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  background: #2F3336;
  color: white;
}

.tableFixHead th, td {
  padding: 8px 16px;
  text-align: center;
}

.tableFixHead th:first-child {
  border-top-left-radius: var(--border-thead-radius);
  border-bottom-left-radius: var(--border-thead-radius);
  border: var(--border-thead-width) solid var(--border-thead-color);
  border-right-width: 0px;
}

.tableFixHead th:last-child {
  border-top-right-radius: var(--border-thead-radius);
  border-bottom-right-radius: var(--border-thead-radius);
  border: var(--border-thead-width) solid var(--border-thead-color);
  border-left-width: 0px;
}

.tableFixHead th:not(:first-child):not(:last-child) {
  border: var(--border-thead-width) solid var(--border-thead-color);
  border-left-width: 0px;
  border-right-width: 0px;  
}

Comments

Świetnie wykonane .

---

Z jakiegoś powodu u mnie nie działało, ale uprościłem i poeksperymentowałem, teraz działa. :)

.tableFixHead table {
    border-spacing: 0;
    border-collapse: separate;
    color: white;
    border-radius: 2px;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
    background: #2F3336;
    color: white;
}

.tableFixHead th {
    padding: 8px 16px;
    text-align: center;
    border: 2px solid; 
}

.tableFixHead th:first-child {
    border-radius: 8px 0 0 8px;
    border-right-width: 0px;
}

.tableFixHead th:last-child {
    border-radius: 0 8px 8px 0;
    border-left-width: 0px;
}

.tableFixHead th:not(:first-child):not(:last-child) {   
    border-left-width: 0px;
    border-right-width: 0px;
}

 

 

Answer 2

Cześć

Wejdź w devtool's swojej przeglądarki skorzystaj z opcji inspektor(Firefox) lub elements(chrome) i pobaw się właściwością box-shadow(w przeglądarce)  elementów w których zauważyłeś swoje dwa wyżej wymienione błędy...

Powodzenia

Answer 3

U mnie  pomogło usunięcie linii "box-shadow: (...);" z "table th:first-child"