Rahmen um bestimmte Zeilen in einer Tabelle?

StackOverflow https://stackoverflow.com/questions/670424

  •  21-08-2019
  •  | 
  •  

Frage

Ich versuche, einige HTML / CSS zu entwerfen, die einen Rahmen um bestimmte Zeilen in einer Tabelle setzen. Ja, ich weiß, ich bin nicht wirklich angeblich Tabellen für das Layout verwenden, aber ich weiß nicht genug CSS, um es vollständig noch zu ersetzen.

Wie auch immer, ich habe eine Tabelle mit mehreren Zeilen und Spalten fusionierten einige mit rowspan und colspan, und ich möchte eine einfache Grenze um Teile der Tabelle setzen. Derzeit bin ich mit 4 separate CSS-Klassen (oben, unten, links, rechts), die ich an die <td> Zellen anschließen, die am oberen Rand sind, unten, links und rechts in der Tabelle sind. 

.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 einen einfacheren Weg zu tun, was ich will? Ich habe versucht, oben und unten auf einen <tr> Anwendung, aber es hat nicht funktioniert. (P. S. Ich bin neu in CSS, so gibt es wahrscheinlich eine wirklich grundlegende Lösung für dieses Problem, die ich verpasst habe.)

Hinweis: Ich brauche mehr umrandeten Abschnitte haben. Die Grundidee ist es, mehr grenzten Cluster mit jeweils mehreren Reihen haben.

War es hilfreich?

Lösung

Wie wäre es tr {outline: thin solid black;}? Funktioniert bei mir auf tr oder tbody Elemente und erscheint mit den meisten Browsern, einschließlich IE kompatibel sein 8+ jedoch nicht vor.

Andere Tipps

Vielen Dank an alle, die geantwortet haben! Ich habe alle Lösungen hier vorgestellten versucht, und ich habe für andere mögliche Lösungen mehr Suche im Internet getan, und ich glaube, ich habe eine gefunden, die viel versprechend 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>

Ausgang:

eingeben Bild Beschreibung hier

Statt mit den top, bottom, left und right Klassen zu jedem <td> hinzuzufügen, alles, was ich tun muß, ist top row nach oben <tr>, bottom row nach unten <tr> hinzufügen und row jeden <tr> dazwischen. Gibt es etwas falsch mit dieser Lösung? Gibt es plattformübergreifende Fragen sollte ich beachten?

Wenn Sie den border-collapse Stil an der der übergeordneten Tabelle collapse sollten Sie in der Lage sein, die tr stylen:  (Stile 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>

Ausgang:

HTML-Ausgabe

Ich spiele gerade mit tut dies auch um, 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 wird die Verwendung von Flüssigkeit / automatischer Spaltenbreiten verhindern, wie Zellen werden nicht mehr mit denen in anderen Reihen ausgerichtet, aber Rand / Farbformatierung funktioniert immer noch OK. Die Lösung ist auf gibt den TR und tds eine bestimmte Breite (entweder px oder%).

Natürlich können Sie die Wahl tr.myClass machen könnten, wenn man es will nur auf bestimmte Zeilen anzuwenden. Offenbar display: table nicht für IE funktioniert 6/7, doch, aber es gibt wahrscheinlich andere Hacks (hasLayout?), Die möglicherweise für die Arbeit. : - (

Hier ist ein Ansatz tbody Elemente verwenden, die die Art und Weise, es zu tun sein könnten. Sie können nicht die Grenze auf einem tbody (gleiche, wie Sie können nicht auf einem tr) gesetzt, aber die Hintergrundfarbe einstellen. Wenn der Effekt wollen, sind Sie auf acheive mit einer Hintergrundfarbe auf den Gruppen der Reihen statt einer Grenze erhalten wird dies funktionieren wird. 

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

Gruppen Zeilen zusammen mit dem <tbody> Tag und dann Stil anwenden. 

<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;
}

Die einzige andere Art, wie ich mir vorstellen kann, es zu tun ist jede der Zeilen, die Sie einen Rahmen um in einer verschachtelten Tabelle müssen einzuschließen. Das wird die Grenze leichter zu tun, macht jedoch möglicherweise andere Layout-Probleme creat, werden Sie manuell die Breite auf Tabellenzellen usw.

gesetzt haben

Ihr Ansatz kann gut sein, die beste auf der anderen Layout rerquirements abhängig und das vorgeschlagene Konzept hier 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>

Auf der Basis Ihrer Anforderung, dass Sie es wirklich eine Grenze um einen beliebigen Block von MxN Zellen setzen wollen, ist kein einfacher Weg, es zu tun, ohne Javascript zu verwenden. Wenn Ihre Zellen mit Ihnen festgelegt sind Schwimmer verwenden kann, aber das ist auch aus anderen Gründen problematisch. was Sie tun kann sehr mühsam sein, aber es ist in Ordnung.

Ok, wenn Sie in einer Javascript-Lösung interessiert sind, mit jQuery (meine bevorzugte Methode), beenden Sie mit diesem ziemlich beängstigend Stück Code oben: 

<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 werde gerne Vorschläge auf einfachere Wege nehmen, dies zu tun ...

Der Trick ist mit Eigenschaft umreißen dank enigment's mit wenig Änderung beantworten

diese Klasse verwenden 

.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 „eingeben hoffe, das hilft Ihnen

Eine einfachere Möglichkeit ist die Tabelle eine serverseitige Steuerung zu machen. Sie könnten etwas Ähnliches verwenden: 

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top