Spectre Forms 水平表格

Spectre Forms是一个基于Spectre.css的表单组件库，提供了丰富的表单元素，其中就包含水平表格。

特点

• 基于Spectre.css，轻量、简洁。
• 提供水平表格，可用于展示、编辑表单数据。
• 轻松自定义表格样式、列宽、单元格对齐方式。

用法

水平表格通过form-horizontal类实现，每行为一个table row，每列为table cell。以下是一个简单的示例：

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-3 col-sm-12" for="input-username">用户名</label>
    <div class="col-9 col-sm-12">
      <input class="form-input" id="input-username" type="text" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group">
    <label class="col-3 col-sm-12" for="input-password">密码</label>
    <div class="col-9 col-sm-12">
      <input class="form-input" id="input-password" type="password" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group">
    <div class="col-3"></div>
    <div class="col-9 col-sm-12">
      <button class="btn btn-primary" type="submit">登录</button>
    </div>
  </div>
</form>

代码片段如下：

```html
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-3 col-sm-12" for="input-username">用户名</label>
    <div class="col-9 col-sm-12">
      <input class="form-input" id="input-username" type="text" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group">
    <label class="col-3 col-sm-12" for="input-password">密码</label>
    <div class="col-9 col-sm-12">
      <input class="form-input" id="input-password" type="password" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group">
    <div class="col-3"></div>
    <div class="col-9 col-sm-12">
      <button class="btn btn-primary" type="submit">登录</button>
    </div>
  </div>
</form>

## 自定义样式

可以通过在每个单元格上添加`.col-*`类来控制每列的宽度，也可以通过在每个`.form-group`上添加`.text-left`、`.text-center`、`.text-right`类来控制每行单元格对齐方式。以下是一个示例：

```html
<form class="form-horizontal">
  <div class="form-group text-left">
    <div class="col-3">序号</div>
    <div class="col-4">姓名</div>
    <div class="col-5">操作</div>
  </div>
  <div class="form-group text-center">
    <div class="col-3">1</div>
    <div class="col-4">张三</div>
    <div class="col-5"><span class="btn btn-link">编辑</span> | <span class="btn btn-link">删除</span></div>
  </div>
  <div class="form-group text-center">
    <div class="col-3">2</div>
    <div class="col-4">李四</div>
    <div class="col-5"><span class="btn btn-link">编辑</span> | <span class="btn btn-link">删除</span></div>
  </div>
  <div class="form-group text-center">
    <div class="col-3">3</div>
    <div class="col-4">王五</div>
    <div class="col-5"><span class="btn btn-link">编辑</span> | <span class="btn btn-link">删除</span></div>
  </div>
</form>

代码片段如下：

```html
<form class="form-horizontal">
  <div class="form-group text-left">
    <div class="col-3">序号</div>
    <div class="col-4">姓名</div>
    <div class="col-5">操作</div>
  </div>
  <div class="form-group text-center">
    <div class="col-3">1</div>
    <div class="col-4">张三</div>
    <div class="col-5"><span class="btn btn-link">编辑</span> | <span class="btn btn-link">删除</span></div>
  </div>
  <div class="form-group text-center">
    <div class="col-3">2</div>
    <div class="col-4">李四</div>
    <div class="col-5"><span class="btn btn-link">编辑</span> | <span class="btn btn-link">删除</span></div>
  </div>
  <div class="form-group text-center">
    <div class="col-3">3</div>
    <div class="col-4">王五</div>
    <div class="col-5"><span class="btn btn-link">编辑</span> | <span class="btn btn-link">删除</span></div>
  </div>
</form>

## 总结

Spectre Forms 的水平表格是一个简洁、轻量，功能丰富的表单元素，可以用于展示表单数据、编辑表单数据等场景。需要注意的是，Spectre Forms 仅是一个表单组件库，需要与其他框架或库一起使用。