blocks|key|4145847|text|您只需要将表格包装在<div>中，并应用左边距和负框阴影。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4145848|++++<style+type="text/css">
++++++++.outer+{
++++++++++++padding-top:+35px;
++++++++++++margin-left:+35px;
++++++++++++box-shadow:+-35px+0+0+rgba(0,0,128,0.8)
++++++++}
++++++++.outer+table+{
++++++++++++border-collapse:+collapse;
++++++++}
++++++++.outer+th,+.outer+td+{
++++++++++++padding:+3px;
++++++++}
++++++++.ltBlue+{
++++++++++++background-color:cornflowerblue;
++++++++++++color:+white;
++++++++++++font-weight:+500;
++++++++}
++++++++.outer+tr+td:first-child+{
++++++++++++width:+35px;
++++++++++++padding:+0;
++++++++}
++++++++.outer+tr+td:nth-child(5)+{
++++++++++++text-align:+right;
++++++++}
++++</style>|code-block|syntax|javascript|4145849|还有..。|4145850|++++<div+class="outer">
++++++++<table>
++++++++++++<tr>
++++++++++++++++<td+class="ltBlue">&nbsp;</td>
++++++++++++++++<td+class="ltBlue"+colspan="4"+style="text-align:+center;">Overdue+Books</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td+class="ltBlue">&nbsp;</td>
++++++++++++++++<th>Date</th>
++++++++++++++++<th>Title</th>
++++++++++++++++<th>Due</th>
++++++++++++++++<th>Fine</th>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td+class="ltBlue">&nbsp;</td>
++++++++++++++++<td>01/20/2018</td>
++++++++++++++++<td>Goodnight+Moon</td>
++++++++++++++++<td>01/14/2018</td>
++++++++++++++++<td>$6.34</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td+class="ltBlue">&nbsp;</td>
++++++++++++++++<td>01/20/2018</td>
++++++++++++++++<td>Goodnight+Moon</td>
++++++++++++++++<td>01/14/2018</td>
++++++++++++++++<td>$6.34</td>
++++++++++++</tr>
++++++++</table>
++++</div>|4145851|entityMap^0|A|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>You'll just need to wrap the table in a <code>&lt;div&gt;</code> and apply a left margin and a negative box-shadow.</p>

<pre><code>    &lt;style type="text/css"&gt;
        .outer {
            padding-top: 35px;
            margin-left: 35px;
            box-shadow: -35px 0 0 rgba(0,0,128,0.8)
        }
        .outer table {
            border-collapse: collapse;
        }
        .outer th, .outer td {
            padding: 3px;
        }
        .ltBlue {
            background-color:cornflowerblue;
            color: white;
            font-weight: 500;
        }
        .outer tr td:first-child {
            width: 35px;
            padding: 0;
        }
        .outer tr td:nth-child(5) {
            text-align: right;
        }
    &lt;/style&gt;
</code></pre>

<p>and...</p>

<pre><code>    &lt;div class="outer"&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td class="ltBlue"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td class="ltBlue" colspan="4" style="text-align: center;"&gt;Overdue Books&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="ltBlue"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;th&gt;Date&lt;/th&gt;
                &lt;th&gt;Title&lt;/th&gt;
                &lt;th&gt;Due&lt;/th&gt;
                &lt;th&gt;Fine&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="ltBlue"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;01/20/2018&lt;/td&gt;
                &lt;td&gt;Goodnight Moon&lt;/td&gt;
                &lt;td&gt;01/14/2018&lt;/td&gt;
                &lt;td&gt;$6.34&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="ltBlue"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;01/20/2018&lt;/td&gt;
                &lt;td&gt;Goodnight Moon&lt;/td&gt;
                &lt;td&gt;01/14/2018&lt;/td&gt;
                &lt;td&gt;$6.34&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
</code></pre>


blocks|key|4145562|text|这应该会带你去你想去的地方。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4145563|<html+lang="en">
<head>
<meta+charset="utf-8"+/>

</head>
<body>
++<div+id="table_2_border"+style="width:300px;border-left:1px+solid+orange;border-top:1px+solid+black;border-right:1px+solid+pink;border-bottom:1px+solid+yellow">
++<table+style="width:295px;margin-right:auto;margin-left:auto;border-left:1px+solid+green;border-top:1px+solid+blue;border-right:1px+solid+yellow;border-bottom:1px+solid+red">
++++++++++++<tr>
++++++++++++++++<th+style="border-left:1px+solid+green;border-bottom:1px+solid+pink">One</th>
++++++++++++++++<th+style="border-left:1px+solid+red;">Two</th>
++++++++++++++++<th+style="border-left:1px+solid+blue;">Three</th>
++++++++++++++++<th+style="border-left:1px+solid+orange;">Four</th>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>One+info</td>
++++++++++++++++<td>Two+info</td>
++++++++++++++++<td>Three+info</td>
++++++++++++++++<td>Four+info</td>
++++++++++++</tr>
++++++++++</table>
++++++++</div>
</body>
</html>|code-block|syntax|javascript|4145564|正如您所看到的，您可以根据您选择的颜色设置每个部分的样式。|4145565|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This should get you where you want.</p>

<pre><code>&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;

&lt;/head&gt;
&lt;body&gt;
  &lt;div id="table_2_border" style="width:300px;border-left:1px solid orange;border-top:1px solid black;border-right:1px solid pink;border-bottom:1px solid yellow"&gt;
  &lt;table style="width:295px;margin-right:auto;margin-left:auto;border-left:1px solid green;border-top:1px solid blue;border-right:1px solid yellow;border-bottom:1px solid red"&gt;
            &lt;tr&gt;
                &lt;th style="border-left:1px solid green;border-bottom:1px solid pink"&gt;One&lt;/th&gt;
                &lt;th style="border-left:1px solid red;"&gt;Two&lt;/th&gt;
                &lt;th style="border-left:1px solid blue;"&gt;Three&lt;/th&gt;
                &lt;th style="border-left:1px solid orange;"&gt;Four&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;One info&lt;/td&gt;
                &lt;td&gt;Two info&lt;/td&gt;
                &lt;td&gt;Three info&lt;/td&gt;
                &lt;td&gt;Four info&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>As you can see, you can style each section to the color of your choice.</p>


<p>I am trying to make a table, and I want some of the rows to have 2 different colored 35px borders, kind of like this: </p>

<p><img src="https://i.stack.imgur.com/RIaCw.png" alt="Multicolor Double Border Example">.</p>

<p>Please let me know if you know of a way to do this, all of the pots that I've seen online only tell you how to make a multicolored four sided border and I have not figured out how to modify those solutions to only apply to one edge. </p>


Double single-side border of different colors on an HTML table row

我正在尝试制作一个表格，我想让一些行有两个不同颜色的35px边框，有点像这样：​。如果你知道这样做的方法，请告诉我，我在网上看到的所有花盆都只告诉你如何制作一个多彩的四边边框，而我还没有想出如何修改这些解决方案，使其只适用于一条边。

问HTML表格行上不同颜色的双面单面边框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表格行上不同颜色的双面单面边框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表格行上不同颜色的双面单面边框
EN