Question

我尝试修复具有自定义列宽的可滚动表的标题。

当我将tbody转到block标签时，标题栏和主体栏互不匹配。

您可以从这支笔上看到示例

HTML部件有一个div，在这个div中有一个表，我在col标签中定义了列大小。

    .tableDiv{
      height:150px;
      overflow-y:scroll;
      padding:10px;
    }
    
    .fixed_header{
       width: 100%;
       table-layout: fixed;
    }

    <div class="tableDiv">
    <table class="fixed_header">
      <thead>
        <colgroup>
          <col style="width:70px">
          <col style="width:150px">
          <col>
          <col>
          <col>
        </colgroup>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>row 1-0</td>
          <td>row 1-1</td>
          <td>row 1-2</td>
          <td>row 1-3</td>
          <td>row 1-4</td>
        </tr>
        <tr>
          <td>row 2-0</td>
          <td>row 2-1</td>
          <td>row 2-2</td>
          <td>row 2-3</td>
          <td>row 2-4</td>
        </tr>
        <tr>
          <td>row 3-0</td>
          <td>row 3-1</td>
          <td>row 3-2</td>
          <td>row 3-3</td>
          <td>row 3-4</td>
        </tr>
        <tr>
          <td>row 4-0</td>
          <td>row 4-1</td>
          <td>row 4-2</td>
          <td>row 4-3</td>
          <td>row 4-4</td>
        </tr>
        <tr>
          <td>row 5-0</td>
          <td>row 5-1</td>
          <td>row 5-2</td>
          <td>row 5-3</td>
          <td>row 5-4</td>
        </tr>
        <tr>
          <td>row 6-0</td>
          <td>row 6-1</td>
          <td>row 6-2</td>
          <td>row 6-3</td>
          <td>row 6-4</td>
        </tr>
        <tr>
          <td>row 7-0</td>
          <td>row 7-1</td>
          <td>row 7-2</td>
          <td>row 7-3</td>
          <td>row 7-4</td>
        </tr>
     
      </tbody>
      </table>
    </div>

谢谢

Answer 1

您可以将页眉的位置设置为固定。我正在编写示例布局。

const ColoredDateCellWrapper = (children: any, value: any) =>
    React.cloneElement(Children.only(children), {
        style: {
            ...children.style,
            backgroundColor: value < this.state.currentDay ? 'lightgreen' : 'lightblue',
        },
    });

<BigCalendar
    showMultiDayTimes
    localizer={localizer}
    selectable
    selected={this.state.selected}
    onSelectEvent={this.onSelectEvent}
    onSelectSlot={this.onSelectSlot}
    events={this.state.events}
    step={60}
    timeslots={1}
    defaultView='week'
    startAccessor="start"
    endAccessor="end"
    defaultDate={new Date()}
    components={{
        dateCellWrapper: ColoredDateCellWrapper
    }}
/>

如何为具有自定义列宽的可滚动表固定标题？

1 个答案: