2023年7月14日 06:44:34go评论71阅读模式

英文:

How can I round the borders of this table?

问题

我使用了一个HTML代码生成器来创建这个表格，只是为了方便。我想给它添加圆角边框，但不知道如何做。

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top;
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top;
}

<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>每单位价格</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>送货费</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>送货时间</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

希望这些CSS样式可以帮助您为表格添加圆角边框。如果您需要进一步的帮助，请随时提问。

英文:

I used a html code generator in order to create this table just for ease, I want to give it rounded borders but am clueless as to how

.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
border-color: black;
border-style: solid;
border-width: 3px;
font-family: Arial, sans-serif;
font-size: 14px;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.tg th {
border-color: black;
border-style: solid;
border-width: 3px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.tg .tg-5091 {
background-color: #ffffff;
border-color: #93d22c;
color: #07215c;
font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
text-align: center;
vertical-align: top
}
.tg .tg-2kj1 {
background-color: #ffffff;
border-color: #93d22c;
color: #07215c;
font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
text-align: left;
vertical-align: top
}

&lt;table class=&quot;tg&quot; style=&quot;width: 100%;&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style=&quot;text-align: center; width: 165px;&quot; class=&quot;tg-5091&quot;&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;&lt;strong&gt;Price per unit&lt;/strong&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;&lt;strong&gt;Delivery Fee&lt;/strong&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;&lt;strong&gt;Delivery Time&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;X&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

Could anyone give me some help, complete noob here sorry

I've tried adding CSS solutions i've found online but because of the way the table is generated none of it works, I know I should just build the table from scratch but at the time this was so much quicker and it is used multiple times across a site, only now am I deciding to add borders and it would be easier to add it to tables where it is needed rather than replacing them completely

答案1

得分: 1

在表格上：

border-radius: 1em;
overflow: hidden;
outline: 3px solid #93d22c;
outline-offset: -3px;

完整代码（除.tg之外未更改）：

/* 语言: lang-css */

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 1em;
  overflow: hidden;
  outline: 3px solid #93d22c;
  outline-offset: -3px;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top;
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top;
}

<!-- 语言: lang-html -->

<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>每单位价格</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>运费</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>交货时间</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

希望这对你有所帮助！

英文:

On table:

border-radius: 1em;
overflow: hidden;
outline: 3px solid #93d22c;
outline-offset: -3px;

Full code (unchanged except .tg):

.tg {
border-collapse: collapse;
border-spacing: 0;
border-radius: 1em;
overflow: hidden;
outline: 3px solid #93d22c;
outline-offset: -3px;
}
.tg td {
border-color: black;
border-style: solid;
border-width: 3px;
font-family: Arial, sans-serif;
font-size: 14px;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.tg th {
border-color: black;
border-style: solid;
border-width: 3px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.tg .tg-5091 {
background-color: #ffffff;
border-color: #93d22c;
color: #07215c;
font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
text-align: center;
vertical-align: top
}
.tg .tg-2kj1 {
background-color: #ffffff;
border-color: #93d22c;
color: #07215c;
font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
text-align: left;
vertical-align: top
}

&lt;table class=&quot;tg&quot; style=&quot;width: 100%;&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style=&quot;text-align: center; width: 165px;&quot; class=&quot;tg-5091&quot;&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;&lt;strong&gt;Price per unit&lt;/strong&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;&lt;strong&gt;Delivery Fee&lt;/strong&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;&lt;strong&gt;Delivery Time&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;X&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

答案2

得分: 0

删除border-collapse: collapse;，这会导致不使用border-radius无法创建圆角边框的表格。相反，只需使用border-spacing: 0;，然后进行border-radius设置。

    .tg {
      /* border-collapse: collapse; */
      border-spacing: 0;
    }

    tr:first-child th:first-child {
      border-top-left-radius: 20px;
    }
    tr:first-child th:last-child {
      border-top-right-radius: 20px;
    }
    tr:last-child td:first-child {
      border-bottom-left-radius: 20px;
    }
    tr:last-child td:last-child {
      border-bottom-right-radius: 20px;
    }

这将使您的表格边框具有圆角效果。

英文:

Remove border-collapse: collapse; its cause you not to do an rounded border for table using a border-radius. Instead, just use border-spacing: 0; then do an border-radius.

.tg {
/* border-collapse: collapse; */
border-spacing: 0;
}
tr:first-child th:first-child {
border-top-left-radius: 20px;
}
tr:first-child th:last-child {
border-top-right-radius: 20px;
}
tr:last-child td:first-child {
border-bottom-left-radius: 20px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 20px;
}
.tg td {
border-color: black;
border-style: solid;
border-width: 3px;
font-family: Arial, sans-serif;
font-size: 14px;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.tg th {
border-color: black;
border-style: solid;
border-width: 3px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.tg .tg-5091 {
background-color: #ffffff;
border-color: #93d22c;
color: #07215c;
font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
text-align: center;
vertical-align: top
}
.tg .tg-2kj1 {
background-color: #ffffff;
border-color: #93d22c;
color: #07215c;
font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
text-align: left;
vertical-align: top
}

&lt;table class=&quot;tg&quot; style=&quot;width: 100%;&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style=&quot;text-align: center; width: 165px;&quot; class=&quot;tg-5091&quot;&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;&lt;strong&gt;Price per unit&lt;/strong&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;&lt;strong&gt;Delivery Fee&lt;/strong&gt;&lt;/th&gt;
&lt;th class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;&lt;strong&gt;Delivery Time&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;X&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;tg-2kj1&quot; style=&quot;width: 165px;&quot;&gt;X&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 108px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 99px;&quot;&gt;1&lt;/td&gt;
&lt;td class=&quot;tg-5091&quot; style=&quot;width: 120.288px;&quot;&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何使这张表格的边框变圆？

问题

答案1

答案2

显示和隐藏外部div，当输入框聚焦和失焦时，使用CSS。

Clip-path 被显示为扭曲。

如何在使用背景图片时平移偶数行。

在Hugo中如何在我的文章中插入图片？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论