纯 HTML/CSS 中的复杂线图答案

【问题标题】：Complex lines diagram in pure HTML/CSS纯 HTML/CSS 中的复杂线图
【发布时间】：2022-11-05 01:44:25
【问题描述】：

如何使用 HTML + CSS 更接近这里的布局？

我需要使用简单的 html/css 来执行此操作，因为我正在为超过 400 条指令自动执行此过程，并且我将 html 源代码从 C# 直接输出到 .html 文件。也允许使用 CSS。

我想要一些关于如何实现这一点的指示，也许我可以遵循一些现有的例子作为指导。所附的布局不是一成不变的，但它必须遵循这种逻辑，以指出比特组及其代表的含义。

【问题讨论】：

标签： html css

【解决方案1】：

好吧，做了一些摆弄，我对我得到的很满意。它与我最初的概念略有不同，但我认为它更好。

代码显然可以优化，但出于我的目的，我并不在意。这将是 .pdf 参考的中间程序步骤。

这是我得到的结果和下面的代码。

<!DOCTYPE html>
<html>
<head>
    <style>

    body {
        font-family: Arial;
        font-size: 12px;
    }

    .over {
        padding:0;
        height:6px;
        border: 1px solid black;
        border-bottom: 0px;
    }

    .under {
        padding:0;
        height:6px;
        border: 1px solid black;
        border-top: 0px;
    }
    .bits
    {
        font-family:courier, courier new, serif;
        font-size: 16px;
        font-weight:900;
    }
    
    .unused {
        color:#aaa;
    }

    .spacer {
        padding:0;
        border: 0;
        min-width:9px;
    }

    .bit5 {
        width:44px;
    }

    .bit6 {
        width:53px;
    }

    .bit8 {
        width:71px;
    }

    .bit5-clear {
        border: 0;
        text-align: center;
        width:44px;
    }

    .bit6-clear {
        border: 0;
        text-align: center;
        width:53px;
    }

    .bit8-clear {
        border: 0;
        text-align: center;
        width:71px;
    }
    
    .bit8-clear-over {
        border: 0;
        text-align: center;
        width:71px;
    }

    </style>
</head>
<body>

    <h2>Diagram example</h2>
    <br />
    <br />
    <table>
      <tr>
        <td class="bit8-clear-over">0x03</td>
        <td class="spacer">
        <td class="bit8-clear-over">0x07</td>
        <td class="spacer">
        <td class="bit8-clear-over">0x00-0x19</td>
        <td class="spacer">
        <td class="bit8-clear-over">0x00-0xFF</td>
      </tr>
    </table>

    <table>
      <tr>
        <td class="bit8 over"></td>
        <td class="spacer">
        <td class="bit8 over"></td>
        <td class="spacer">
        <td class="bit8 over"></td>
        <td class="spacer">
        <td class="bit8 over"></td>
      </tr>
    </table>

    <div class="bits">
    00000010 000001<span class="unused">00 000</span>00000 00000000
    </div>

    <table>
      <tr>
        <td class="bit8 under"></td>
        <td class="spacer">
        <td class="bit6 under"></td>
        <td class="bit6 under"></td>
        <td class="bit5 under"></td>
        <td class="spacer">
        <td class="bit8 under"></td>
      </tr>
    </table>

    <table>
      <tr>
        <td class="bit8-clear">ADD</td>
        <td class="spacer">
        <td class="bit6-clear">r,n</td>
        <td class="bit6-clear"><i>not used</i></td>
        <td class="bit5-clear">8 bit register index</td>
        <td class="spacer">
        <td class="bit8-clear">8 bit immediate value</td>
      </tr>
    </table>

</body>

【讨论】：