Wie Full-size-HTML-Tabellen? (Keine Ränder, Volle Fenster)

Ich möchte erstellen Sie eine einfache zwei-Spalten-layout in HTML mit einer Tabelle, aber ich möchte die Tabelle zu "besetzen" die ganze SEITE. ohne Ränder ("white spaces" zwischen den Grenzen und browser-Fensters), lassen Sie mich klarer sein, mit einem Beispiel:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<meta name="Microsoft Theme" content="none">
</head>

<body>

<table border="4" width="100%" height="567" style="border-collapse: collapse; border: 3px solid #FF0000" bordercolorlight="#FF0000">
<tr>
    <td bgcolor="#008080">&nbsp;</td>
    <td width="160" bgcolor="#000000">&nbsp;</td>
</tr>
   </table>

   </body>

   </html>

Wie Sie dort sehen können, wir haben einen grünen Tisch mit einem schwarzen Seitenleiste und rot umrandet, die alle oben auf einem weißen hintergrund. Die Sache ist die, ich will die Grenzen der "absoluten", ohne Leerzeichen zwischen browser-Fenster und Sie. Ich möchte den Tisch zu besetzen, um die Volle Seite ohne Leerzeichen oder "Seitenränder" oder was auch immer Sie sind, sorry für überflüssig.

Wie kann ich das tun?

body{margin:0px;padding:0px} im CSS? Und width:100% in der Tabelle??
Lesen Sie diese bitte 🙂

InformationsquelleAutor Jmlevick | 2011-03-19

  1. 2

    Dies sollte es tun:

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
  .container {
    width: 100%;
    min-height: 567px;
    padding: 0px;
    border: 3px solid #FF0000;
  }
  .container .content {
    background-color: #008080;
  }
  .container .sidebar {
    background-color: #000000;
    width: 160px;
  }
</style>
</head>

<body>

<table class="container">
<tr>
    <td class="content">&nbsp;</td>
    <td class="sidebar">&nbsp;</td>
</tr>
</table>

</body>

</html>

    InformationsquelleAutor RDL

  2. 0

    @RDL: Ja, ich fand auch einen anderen Weg, es zu tun, hier ist der Beispielcode (die Kommentare auf Spanisch):

    <!DOCTYPE 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>

    P. S. vielen Dank für Ihre Hilfe, Ihre Methode es auch Tat 😉

    schöne Arbeit. Seien Sie vorsichtig mit dem '*' in der css. Manchmal kann es unterschiedliche Wirkungen in verschiedenen Browsern je nachdem, wie es verwendet wird.
    Eine andere Frage: Dass der code, den ich schrieb, bis es klappte auch ganz gut... Das einzige problem das ich habe ist es, dass die sidebar rechts ist nicht die Anpassung an verschiedene Bildschirm-Auflösungen, ich meine, es passen bis "1080px" Höhe ca, aber wenn Sie gehen mit 1200px der bar trennt sich von der Fußzeile (Ja, ich habe eine Fußzeile zu) der linken Seite der Tabelle scheint nicht zu afected an alle, es sieht gut auf allen Bildschirmen, die Fußzeile passt sich selbst an Auflösungen ändert sich auch, aber auf der rechten Seitenleiste oder der rechten "Spalte" der Tabelle nicht, warum? Hoffe, Sie können helfen.
    Müsste ich den code sehen. Eine Tabelle sollte nie "trennen" sich beim ändern der browser-Breite. Sollte die Tabelle erweitern, aber die sidebar wird nicht größer von der Breite her so gestaltet, dass es auf eine Feste Breite.
    es war ein Doctype Problem, löste es von mir selbst: goo.gl/hxdhH es ist die Frage, die ich geöffnet für das problem mit der Antwort, die ich gefunden. Danke! 😉

    InformationsquelleAutor Jmlevick

Schreibe einen Kommentar