Tengo una tabla HTML. Las líneas de la tabla no son lo mismo que el ancho del encabezado. Como arreglarlo ? ¿Qué CSS debo poner y dónde? Perdón por la pregunta tonta, pero no estoy familiarizado con CSS.

Este es un ejemplo de mi código fuente HTML:

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <link rel="icon" href="ressources/favicon.ico" />
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="ressources/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>


    
      <div class="container">
      <table class="table table-responsive">
      <thead>
      <tr>
        <th>Type</th>
        <th>€/GO</th>
        <th>L/GO</th>
        <th>€/Value</th>
        <th>L/Value</th>
      </tr>
      </thead>

      <tbody style="height:150px;  width: 100%;  display:block;overflow-y:auto">
      <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:blue;">
        <th scope="row">GR</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:blue;">
        <th scope="row">GR</th>
        <td>400</td>
        <td>200</td>
        <td>50</td>
        <td>120</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>100</td>
        <td>50</td>
        <td>10</td>
        <td>20</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>111</td>
        <td>1</td>
        <td>22</td>
        <td>222</td>
        </tr>
        
      </tbody>
      </table>
      </div>
      </body>
</html>

Muchas gracias por la ayuda ! Si pudiera crear una bifurcación JSFiddle, sería genial o simplemente pondría una parte del código que debería agregar.

1
john.balemak 25 jun. 2020 a las 19:13

3 respuestas

La mejor respuesta

Prueba esto y avísame si te ayuda.

<style>
 th, td , tr{
    width:100px;
}

</style>
0
AziMez 25 jun. 2020 a las 16:44

En <tbody>, elimine el estilo de bloque de pantalla [display: block]

0
MrBrN197 25 jun. 2020 a las 16:31
    <!doctype html>
    <html lang="fr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <link rel="icon" href="ressources/favicon.ico" />
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="ressources/style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
<style>
 th, td , tr{
    width:100px;
}

</style>
    <body>


        
          <div class="container">
          <table class="table table-responsive">
          <thead>
          <tr>
            <th>Type</th>
            <th>€/GO</th>
            <th>L/GO</th>
            <th>€/Value</th>
            <th>L/Value</th>
          </tr>
          </thead>

          <tbody style="height:150px;  width: 100%;  display:block;overflow-y:auto">
          <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:blue;">
            <th scope="row">GR</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:blue;">
            <th scope="row">GR</th>
            <td>400</td>
            <td>200</td>
            <td>50</td>
            <td>120</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>100</td>
            <td>50</td>
            <td>10</td>
            <td>20</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>111</td>
            <td>1</td>
            <td>22</td>
            <td>222</td>
            </tr>
            
          </tbody>
          </table>
          </div>
          </body>
    </html>
0
AziMez 25 jun. 2020 a las 16:48