当前位置：文江博客话题详情

HTML html-table xhtml border

带有自定义边框的表格

发布于 2024-11-29 22:05:39 字数 1625 浏览 0 评论 0原文

我正在尝试制作一个类似于以下内容的表格：

在此处输入图像描述

这是我的代码：

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  width="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Your Trun!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

但我遇到了删除 Your Trun! 语句时出现问题，表格将如下所示：

在此处输入图像描述

我该如何解决这个问题？

I'm trying to make a table similar to the following:

enter image description here

Here is my code:

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  width="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Your Trun!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

But I have faced a problem when removing Your Trun! statement, the table will be like this:

enter image description here

How can I solve this issue?

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

乖乖公主 2024-12-06 22:05:39

只需使用：

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  width="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;"> </td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

jsFiddle: http://jsfiddle.net/Vgk2W/

Just use :

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  width="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;"> </td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

jsFiddle: http://jsfiddle.net/Vgk2W/

回复收藏 0 原文

北座城市 2024-12-06 22:05:39

CSS 属性“空单元格：显示；”也可以在更现代的浏览器中工作
测试： http://jsfiddle.net/Vgk2W/1/
支持： http://www.quirksmode.org/css/tables.html

回复收藏 0 原文

~没有更多了~

关于作者

谈场末日恋爱

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文