Question

真的我在3天内搜索所有论坛的解决方案，但遗憾的是没有找到。当我调整屏幕大小并为其余部分创建一个滚动条时，我无法找到如何在html表中修复第一列（不是第一行）：column2，column3，column4 ...仅限CSS和没有JACASCRIPT或JQUERY

Answer 1

尝试位置：固定并使用填充/边距来定位第二个td：）

＆＃13;

/*just for better display*/
td{
  color: red;
}

.first{
  position: fixed;
  color: green;
}

.second{
  padding-left: 25px;
  color: blue;
}

＆＃13;

<html>
  
  <table>
    
    <tr>
      <td class="first">abc</td>
       <td class="second">def</td>
      <td>ghi</td>
    </tr>
    <tr>
       <td class="first">abc</td>
       <td class="second">def</td>
      <td>ghi</td>
    </tr>
    <tr>
       <td class="first">abc</td>
       <td class="second">def</td>
      <td>ghi</td>
    </tr>
  </table>
  
</html>

＆＃13;

Answer 2

<div class="fixed-table-container">
  <div class="header-background"> </div>
  <div class="fixed-table-container-inner">
    <table cellspacing="0">
      <thead>
        <tr>
          <th class="first">
            <div class="th-inner">First</div>
          </th>
          <th class="second">
            <div class="th-inner">Second</div>
          </th>
          <th class="third">
            <div class="th-inner">Third</div>
          </th>
          <th class="third">
            <div class="th-inner">Third</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>First</td>
          <td>First</td>

          <td>First</td>
          <td>First</td>
        </tr>
        <tr>
          <td>tesft</td>
          <td>dddd</td>
          <td>dd</td>
          <td>dd</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<style type="text/css">


/* above this is decorative, not part of the test */

.fixed-table-container {
  width: 100%;
  height: 200px;
  border: 1px solid black;
  margin: 10px auto;
  background-color: white;
  /* above is decorative or flexible */
  position: relative; /* could be absolute or relative */
  padding-top: 30px; /* height of header */
}

.fixed-table-container-inner {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

.header-background {
  background-color: #D5ECFF;
  height: 30px; /* height of header */
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

table {
  background-color: white;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.th-inner {
  position: absolute;
  top: 0;
  line-height: 30px; /* height of header */
  text-align: left;
  border-left: 1px solid black;
  padding-left: 5px;
  margin-left: -5px;
}
.first .th-inner {
    border-left: none;
    padding-left: 6px;
  }




</style>

请通过快速响应的支持来检查

Answer 3

使用 class DurationConverter(commands.Converter): async def convert(self, ctx, argument): amount = argument[:-1] unit = argument[-1] if amount.isdigit() and unit in ['s', 'm', 'h', 'd']: return (int(amount), unit) raise commands.BadArgument(message='Not a valid duration') @client.command(name='mute') @commands.has_permissions(manage_messages=True) async def tempmute(ctx, member: commands.MemberConverter, duration: DurationConverter, reason): channel = client.get_channel(841075670233776149) multiplier = {'s': 1, 'm': 60, 'h': 3600} amount, unit = duration guild = ctx.guild mutedRole = discord.utils.get(guild.roles, name="Muted") if not mutedRole: mutedRole = await guild.create_role(name="Muted") for channel in guild.channels: await channel.set_permissions(mutedRole, speak=False, send_messages=False, read_message_history=True, read_messages=False) await member.add_roles(mutedRole, reason=reason) embed = discord.Embed(title=f'Wyciszony!', description=f"{member.mention} został wyciszony. ", colour=discord.Colour.light_gray()) embed.add_field(name="Powód:", value=reason, inline=False) embed.add_field(name="Wyciszenie zostanie usunięte za:", value=f"{amount}{unit}", inline=False) await ctx.send(embed=embed) await asyncio.sleep(duration) await member.remove_roles(mutedRole) css 属性可以轻松制作第一列或第一行。

            ScrollView marksheetLyt = findViewById(R.id.live_test_marksheet_lyt_id);
            Bitmap bitmap = Bitmap.createBitmap(marksheetLyt.getWidth(), marksheetLyt.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            marksheetLyt.draw(canvas);

            shareMarksheet(bitmap);

position: sticky

具有固定第一列的Html表

3 个答案: