wake-up-neo.com

Rahmen um bestimmte Zeilen in einer Tabelle?

Ich versuche, HTML/CSS zu entwerfen, die bestimmte Zeilen in einer Tabelle umrandet. Ja, ich weiß, ich sollte eigentlich keine Tabellen für das Layout verwenden, aber ich kenne nicht genug CSS, um es vollständig zu ersetzen.

Jedenfalls habe ich eine Tabelle mit mehreren Zeilen und Spalten, von denen einige mit Rowspan und Colspan zusammengefügt wurden, und ich möchte einen einfachen Rand um Teile der Tabelle setzen. Derzeit verwende ich 4 separate CSS-Klassen (oben, unten, links, rechts), die ich an die <td>-Zellen anhebe, die sich oben, unten, links und rechts der Tabelle befinden.

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}
<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>

Gibt es eine einfachere Möglichkeit, das zu tun, was ich will? Ich habe versucht, oben und unten einen <tr> anzuwenden, aber es hat nicht funktioniert. (p.s. Ich bin neu in CSS, daher gibt es wahrscheinlich eine wirklich grundlegende Lösung, die ich vermisst habe.)

Hinweis: Ich muss mehrere umrandete Abschnitte haben. Die Grundidee besteht darin, mehrere umrandete Cluster zu haben, die jeweils mehrere Zeilen enthalten.

117
Kyle Cronin

Wie wäre es mit tr {outline: thin solid black;}? Funktioniert für mich mit tr oder tbody Elementen, und scheint kompatibel zu sein mit den meisten Browsern, einschließlich IE 8+, aber nicht vorher.

110
enigment

Vielen Dank an alle, die geantwortet haben! Ich habe alle hier vorgestellten Lösungen ausprobiert und mehr im Internet nach anderen möglichen Lösungen gesucht. Ich glaube, ich habe eine gefunden, die vielversprechend ist:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}
<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>

Ausgabe:

enter image description here

Anstatt die Klassen top, bottom, left und right zu jedem <td> hinzufügen zu müssen, muss ich lediglich top row oben <tr>, bottom row unten <tr> und row zwischen jedem <tr> hinzufügen. Stimmt etwas mit dieser Lösung nicht? Gibt es plattformübergreifende Probleme, die mir bekannt sein sollten?

51
Kyle Cronin

Wenn Sie den border-collapse-Stil in der übergeordneten Tabelle auf collapse setzen, sollten Sie die tr: .__ formatieren können. (Styles sind Inline für Demo) 

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

Ausgabe:

HTML output

34
Sunrise

Ich habe auch nur damit herumgespielt und dies schien die beste Option für mich zu sein:

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

Beachten Sie, dass dies verhindert die Verwendung von Fluidautomatischen Spaltenbreiten - /, da die Zellen sich nicht mehr an denen in anderen Zeilen ausrichten, die Rahmen-/Farbformatierung jedoch noch funktioniert. Die Lösung besteht darin, den TR und TDs eine festgelegte Breite (entweder px oder%) zu geben.

Natürlich können Sie den Selektor tr.myClass machen, wenn Sie ihn nur auf bestimmte Zeilen anwenden möchten. Offensichtlich funktioniert display: table nicht für IE 6/7, aber es gibt wahrscheinlich andere Hacks (hasLayout?), Die für diese funktionieren könnten. :-(

8
Simon East

Hier ist ein Ansatz, der Körperelemente verwendet, die der Weg sein könnten, dies zu tun. Sie können den Rahmen nicht auf einen Körper setzen (so wie Sie es auf einem tr nicht können), aber Sie können die Hintergrundfarbe einstellen. Wenn der gewünschte Effekt mit einer Hintergrundfarbe in den Zeilengruppen anstelle eines Rahmens erzielt werden kann, funktioniert dies.

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
3
sipwiz

Gruppieren Sie Zeilen mit dem Tag <tbody> und wenden Sie dann den Stil an.

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>  

Und die CSS in style.css

.red-outline {
  outline: 1px solid red;
}
2
csi

Basierend auf Ihrer Anforderung, dass Sie einen beliebigen Block von MxN-Zellen umranden möchten, gibt es keinen einfacheren Weg, dies ohne Javascript zu tun. Wenn Ihre Zellen fest mit Ihnen verbunden sind, können Sie Floats verwenden. Dies ist jedoch aus anderen Gründen problematisch. Was du tust, mag langweilig sein, aber es ist in Ordnung.

Ok, wenn Sie an einer Javascript-Lösung mit jQuery (meinem bevorzugten Ansatz) interessiert sind, erhalten Sie am Ende diesen ziemlich beängstigenden Code:

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

Ich nehme gerne Vorschläge für einfachere Vorgehensweisen entgegen ...

1
cletus

Die einzige andere Möglichkeit, die ich mir vorstellen kann, besteht darin, jede der Zeilen, um die Sie einen Rahmen benötigen, in eine verschachtelte Tabelle einzuschließen. Dadurch wird der Rahmen einfacher, es können jedoch auch andere Layoutprobleme auftreten. Sie müssen die Breite für Tabellenzellen usw. manuell festlegen.

Abhängig von Ihren anderen Layoutanforderungen ist Ihr Ansatz möglicherweise der beste, und der hier vorgeschlagene Ansatz ist nur eine mögliche Alternative.

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
1
sipwiz

der trick ist mit outline property dank enigments antwort mit wenig änderung

benutze diese Klasse

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

dann im HTML

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

und das Ergebnis ist  enter image description here hoffe das hilft dir

0