How to apply "height:auto" to a HTML table column? (or something like that)_问答_开发者

How to apply "height:auto" to a HTML table column? (or something like that)

开发者 https://www.devze.com 2023-02-17 15:53 出处：网络

I\'ll be quick on this one: I have a basic HTML Layout made with a 2 column table that adjusts to fit the window... left column is used to display the actual content of the webpage (so it has more wi

I'll be quick on this one:

I have a basic HTML Layout made with a 2 column table that adjusts to fit the window... left column is used to display the actual content of the webpage (so it has more width) and right column is used as a Sidebar (it is like less than 200px width). I also have a small footer. The problem is, that when you test the webpage at different screen resolutions, all the elements seem to arrange fine, but when you arrive to a "1200px" height screen the right sidebar separates from the footer (They go together) The footer adjusts just fine at the bottom of the page no matter the resolution and all the elements on the webpage look nice, but the right sidebar doesn't. Why is this happening? How can I make that cell/column to adjust to screen resolution's height? it seem to be adjusting to left's column content height and not to screen's height, Why is this happening? How can I fix it?

Basic Sample Code of the Table:

<!DOCTYPE开发者_StackOverflow html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla ajustable al navegador y colunma fija de 200px</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    overflow: auto;
}
#tabla {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #444;
    background-color: #ffc;
}
.celda_dcha {
    width: 200px;
    border: 1px solid #444;
    background-color: #cfc;
}
</style>
</head>

<body>
<!-- los bordes y colores son para testar la maqueta -->
<!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
<!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
<table id="tabla">
    <tr>
        <td>Contenido</td>
        <td class="celda_dcha">Columna para imágenes</td>
    </tr>
</table>
</body>

</html>

I solved it using a "height: 100%" in both css and HTML Codes for the table cells and erasing the HTML declaration. With no Doctype, the table cell acting like a sidebar does what you need it to do (in this case, "adjust" to user's screen resolution no matter the height of the contents in the table)

Hope this can help someone.

See ya!