Fixing an HTML table without allowing resizing

Asked

Viewed 206 times

0

I have a calendar of events where the user clicks on a date and opens a modal to register.

inserir a descrição da imagem aqui

But when a schedule is included, it stays that way:

inserir a descrição da imagem aqui

Note that on day 03, despite having limited the characters with the substr() in PHP and placed the width:50px, he pushed the other column. Look at the table code:

<table class="table table-bordered">
<thead>
<tr>
<th scope="col" style="background-color: #F5F5F5; text-align: center; width: 50px"><abbr title="<?php echo $nome_dia[1]; ?>"><?php echo $nome_abreviado_dia[1]; ?></abbr></th>
<th scope="col" style="background-color: #F5F5F5; text-align: center; width: 50px"><abbr title="<?php echo $nome_dia[2]; ?>"><?php echo $nome_abreviado_dia[2]; ?></abbr></th>
<th scope="col" style="background-color: #F5F5F5; text-align: center; width: 50px"><abbr title="<?php echo $nome_dia[3]; ?>"><?php echo $nome_abreviado_dia[3]; ?></abbr></th>
<th scope="col" style="background-color: #F5F5F5; text-align: center; width: 50px"><abbr title="<?php echo $nome_dia[4]; ?>"><?php echo $nome_abreviado_dia[4]; ?></abbr></th>
<th scope="col" style="background-color: #F5F5F5; text-align: center; width: 50px"><abbr title="<?php echo $nome_dia[6]; ?>"><?php echo $nome_abreviado_dia[6]; ?></abbr></th>
<th scope="col" style="background-color: #F5F5F5; text-align: center; width: 50px"><abbr title="<?php echo $nome_dia[5]; ?>"><?php echo $nome_abreviado_dia[5]; ?></abbr></th>
<th scope="col" style="background-color: #F5F5F5; text-align: center; width: 50px"><abbr title="<?php echo $nome_dia[7]; ?>"><?php echo $nome_abreviado_dia[7]; ?></abbr></th>
</tr>
</thead>
<?php
$coluna = 1;
foreach ($dias as $i => $dia) {
    if ($coluna == 1) {
        $tabela .= '<tr>';
    }
    $class = $i < $posicao_antes || $i >= $posicao_depois ? ' class="extra"' : '';
    if($dia == date("j")){
       $style = "background-color: #F5F5F5";
    }else{
      $style = "";
    }
    if($dia == 0){
    $tabela .= "<td style=\"".$style."\"></td>";
    }else{
    $diaCadastro = date("Y")."-".date("m")."-".$dia;
    $visualizar = $metodos->mostrarEventos($idCliente,$diaCadastro);
    if($visualizar[0] > 0){
      $tabela .= "<td style=\"width: 50px; cursor: pointer; height: 150px;".$style."\" id=\"idTDAlterar\" data-id=\"{$visualizar[1]->IdAgenda}\" data-toggle=\"modal\" data-target=\"#modalAlterar\">";
    }else{
      $tabela .= "<td style=\"width: 50px; cursor: pointer; height: 150px;".$style."\" id=\"idTD\" data-id=\"{$diaCadastro}\" data-toggle=\"modal\" data-target=\"#modal\">";
    }
    $tabela .= $dia."<br>";
    $icone = ($visualizar[0] > 0)?"<i class=\"far fa-calendar-check fa-lg\"></i> ":null;
    $tabela .= $icone . substr(strip_tags($visualizar[1]->Agenda),0,20);
    $tabela .= "</td>";
   }
    $coluna += 1;
    if ($coluna == 8) {
        $tabela .= '</tr>';
        $coluna = 1;
    }
}
echo $tabela;
?>
</tbody>
</table>
html css html5 bootstrap-3 table

  • would not be the case to just use overflow ?

  • Look if it settles, put text-overflow: ellipsis in TD link to this CSS property https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

1 answer

1


Well first of all I recommend making a stylesheet (CSS) since all of its TAG table has the same properties, making a class is much easier to embody the code and then do maintenance on it

<th scope="col" class="tabela"><abbr title="<?php echo $nome_dia[7]; ?>"><?php echo $nome_abreviado_dia[7]; ?></abbr></th>

.tabela{
background-color: #F5F5F5; 
text-align: center; 
width: 50px
}

Second you tried to use TABLE-LAYOUT: fixed across your table?

in his <tr> put the TABLE-LAYOUT: fixed to "hold all your table"

recommend reading:

Browser other questions tagged html css html5 bootstrap-3 table

You are not signed in. Login or sign up in order to post.