diff --git a/src/lib/components/TaskList.svelte b/src/lib/components/TaskList.svelte
index 433bd3890..d1eca17b5 100644
--- a/src/lib/components/TaskList.svelte
+++ b/src/lib/components/TaskList.svelte
@@ -53,16 +53,16 @@
     <!-- TODO: 問題が多くなってきたら、ページネーションを導入する -->
     <!-- TODO: 回答状況に応じて、フィルタリングできるようにする -->
     <div class="overflow-auto rounded-md border">
-      <Table shadow id={grade} class="text-md">
+      <Table shadow id={grade} class="text-md table-fixed w-full">
         <TableHead class="text-sm bg-gray-100">
-          <TableHeadCell class="min-w-[96px] max-w-[120px]">回答</TableHeadCell>
-          <TableHeadCell class="min-w-[240px] max-w-2/3 text-left pl-0 sm:pl-6 truncate">
+          <TableHeadCell class="w-20 sm:w-24 min-w-[5rem]">回答</TableHeadCell>
+          <TableHeadCell class="w-1/2 text-left pl-0 sm:pl-6 truncate overflow-ellipsis">
             問題名
           </TableHeadCell>
-          <TableHeadCell class="min-w-[120px] max-w-[150px] text-left pl-0 truncate">
+          <TableHeadCell class="w-1/3 hidden sm:table-cell text-left pl-0 truncate">
             出典
           </TableHeadCell>
-          <TableHeadCell class="min-w-[24px] text-center">
+          <TableHeadCell class="w-6 text-center">
             <span class="sr-only">編集</span>
           </TableHeadCell>
         </TableHead>
@@ -80,7 +80,7 @@
                   <SubmissionStatusImage {taskResult} {isLoggedIn} />
                 </div>
               </TableBodyCell>
-              <TableBodyCell class="pl-0 sm:pl-6 w-2/3">
+              <TableBodyCell class="w-1/2 text-left truncate pl-0 sm:pl-6">
                 <ExternalLinkWrapper
                   url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
                   description={removeTaskIndexFromTitle(
@@ -91,10 +91,12 @@
                   textColorInDarkMode="dark:text-gray-300"
                 />
               </TableBodyCell>
-              <TableBodyCell class="pl-0 xs:text-lg text-gray-700 dark:text-gray-300">
+              <TableBodyCell
+                class="w-1/3 hidden sm:table-cell text-left truncate pl-0 xs:text-lg text-gray-700 dark:text-gray-300"
+              >
                 {addContestNameToTaskIndex(taskResult.contest_id, taskResult.task_table_index)}
               </TableBodyCell>
-              <TableBodyCell class="px-0">
+              <TableBodyCell class="w-6 px-0">
                 {#if isAdmin}
                   <div class="flex justify-center items-center px-0">
                     <a
diff --git a/src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte b/src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte
index e58492e7f..48c922736 100644
--- a/src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte
+++ b/src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import xss from 'xss';
+
   import {
     Label,
     Table,
@@ -9,6 +11,8 @@
     TableHeadCell,
   } from 'flowbite-svelte';
 
+  import TrashBinOutline from 'flowbite-svelte-icons/TrashBinOutline.svelte';
+
   import GradeLabel from '$lib/components/GradeLabel.svelte';
   import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
 
@@ -31,7 +35,7 @@
     const target = event.target as HTMLElement;
 
     if (target && target instanceof HTMLElement) {
-      const newComment = target.innerText as string;
+      const newComment = xss(target.innerText as string);
 
       // HACK: 代替手段として、50文字以下の場合のみ更新
       if (newComment.length <= 50) {
@@ -104,6 +108,8 @@
 
     return task;
   }
+
+  let isDeleting = false;
 </script>
 
 {#if workBookTasksForTable.length}
@@ -111,16 +117,19 @@
     <span>問題一覧（{workBookTasksForTable.length} 問）</span>
   </Label>
 
-  <Table shadow class="text-md">
+  <Table shadow class="text-md table-fixed w-full" aria-label="Workbook tasks">
+    <caption class="sr-only">List of workbook tasks with their grades and comments</caption>
     <TableHead class="text-sm bg-gray-100">
-      <TableHeadCell class="min-w-[18px] pl-2 md:pl-4 pr-0 text-center">#</TableHeadCell>
-      <TableHeadCell class="text-center px-0" aria-label="Task grade">グレード</TableHeadCell>
-      <TableHeadCell class="min-w-[240px] pl-0 truncate">問題名</TableHeadCell>
-      <TableHeadCell class="min-w-[120px] max-w-[150px] truncate">出典</TableHeadCell>
-      <TableHeadCell class="min-w-[120px] max-w-[150px] px-0 truncate">
+      <TableHeadCell class="w-6 pl-2 md:pl-4 pr-0 text-center">#</TableHeadCell>
+      <TableHeadCell class="w-20 xs:w-24 text-center px-0" aria-label="Task grade">
+        グレード
+      </TableHeadCell>
+      <TableHeadCell class="w-1/2 pl-0 truncate">問題名</TableHeadCell>
+      <TableHeadCell class="w-1/3 hidden sm:table-cell truncate">出典</TableHeadCell>
+      <TableHeadCell class="w-24 md:w-64 hidden sm:table-cell px-0 truncate">
         一言（50文字以下）
       </TableHeadCell>
-      <TableHeadCell class="min-w-[24px] px-0 text-center">
+      <TableHeadCell class="w-12 xs:w-16 text-center">
         <span class="sr-only">編集</span>
       </TableHeadCell>
     </TableHead>
@@ -140,8 +149,8 @@
           </TableBodyCell>
 
           <!-- グレード -->
-          <TableBodyCell>
-            <div class="flex items-center justify-center min-w-[54px] max-w-fit">
+          <TableBodyCell class="w-20 xs:w-24">
+            <div class="flex items-center justify-center">
               <GradeLabel taskGrade={getTaskGrade(tasksMapByIds, task.taskId)} />
             </div>
           </TableBodyCell>
@@ -158,7 +167,10 @@
           </TableBodyCell>
 
           <!-- 出典 -->
-          <TableBodyCell class="xs:text-lg text-gray-700 dark:text-gray-300 truncate">
+          <TableBodyCell
+            class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
+            aria-hidden={true}
+          >
             {addContestNameToTaskIndex(
               task.contestId,
               getTaskTableIndex(tasksMapByIds, task.taskId),
@@ -169,7 +181,7 @@
           <!-- Note: <TableBodyCell>コンポーネントだとon:inputが動作しない -->
           <td
             contenteditable={true}
-            class="xs:text-lg text-gray-700 dark:text-gray-300 truncate"
+            class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
             on:input={(event) => updateComment(index, event)}
             on:focus={handleFocus}
             on:blur={handleBlur}
@@ -179,8 +191,25 @@
           </td>
 
           <!-- 削除 -->
-          <TableBodyCell class="px-0" on:click={() => removeWorkBookTask(task)}>
-            <div class="flex justify-center items-center px-0">削除</div>
+          <TableBodyCell class="w-12 xs:w-16">
+            <button
+              type="button"
+              class="flex justify-center items-center"
+              on:click={() => {
+                if (confirm('本当に削除しますか?')) {
+                  try {
+                    isDeleting = true;
+                    removeWorkBookTask(task);
+                  } finally {
+                    isDeleting = false;
+                  }
+                }
+              }}
+              disabled={isDeleting}
+            >
+              <TrashBinOutline class="w-5 h-5 xs:w-6 xs:h-6" />
+              <span class="sr-only">削除</span>
+            </button>
           </TableBodyCell>
         </TableBodyRow>
       {/each}
diff --git a/src/routes/workbooks/[slug]/+page.svelte b/src/routes/workbooks/[slug]/+page.svelte
index 038edf851..474daff2f 100644
--- a/src/routes/workbooks/[slug]/+page.svelte
+++ b/src/routes/workbooks/[slug]/+page.svelte
@@ -140,14 +140,13 @@
   <!-- 問題一覧 -->
   {#if workBookTasks.length}
     <div class="overflow-auto rounded-md border">
-      <Table shadow class="text-md">
+      <Table shadow class="text-md table-fixed w-full">
         <TableHead class="text-xs xs:text-sm bg-gray-100">
-          <TableHeadCell class="text-center w-14 px-0.5 xs:px-0">グレード</TableHeadCell>
-          <TableHeadCell class="text-center min-w-[96px] max-w-[120px]">回答</TableHeadCell>
-          <TableHeadCell class="min-w-[240px] max-w-2/3 truncate px-0 sm:px-6">問題名</TableHeadCell
-          >
-          <TableHeadCell class="min-w-[120px] max-w-[150px] truncate">出典</TableHeadCell>
-          <TableHeadCell class="text-center px-0">一言</TableHeadCell>
+          <TableHeadCell class="text-center w-16 xs:w-20 px-0.5 xs:px-0">グレード</TableHeadCell>
+          <TableHeadCell class="text-center w-20">回答</TableHeadCell>
+          <TableHeadCell class="w-1/2 truncate px-3 sm:px-6">問題名</TableHeadCell>
+          <TableHeadCell class="w-1/3 hidden xs:table-cell truncate">出典</TableHeadCell>
+          <TableHeadCell class="w-14 text-center px-0.5">一言</TableHeadCell>
         </TableHead>
         <TableBody tableBodyClass="divide-y">
           {#each workBookTasks as workBookTask}
@@ -156,7 +155,7 @@
               class={getBackgroundColorFrom(getTaskResult(workBookTask.taskId).status_name)}
             >
               <!-- 問題のグレード -->
-              <TableBodyCell class="justify-center w-14 px-3">
+              <TableBodyCell class="justify-center w-16 px-0.5 xs:px-3">
                 <div class="flex items-center justify-center min-w-[54px] max-w-[54px]">
                   <GradeLabel taskGrade={getTaskGrade(workBookTask.taskId)} />
                 </div>
@@ -176,7 +175,7 @@
               </TableBodyCell>
 
               <!-- 問題のリンク -->
-              <TableBodyCell class="px-0 sm:px-6">
+              <TableBodyCell class="w-1/2 px-3 sm:px-6">
                 <div class="xs:text-lg truncate">
                   <ExternalLinkWrapper
                     url={getTaskUrl(getContestIdFrom(workBookTask.taskId), workBookTask.taskId)}
@@ -188,15 +187,15 @@
               </TableBodyCell>
 
               <!-- 出典 -->
-              <TableBodyCell>
+              <TableBodyCell class="w-1/3 hidden xs:table-cell">
                 <div class="xs:text-lg text-gray-700 dark:text-gray-300 truncate">
                   {getContestNameFrom(workBookTask.taskId)}
                 </div>
               </TableBodyCell>
 
               <!-- 一言（コメント・ヒント） -->
-              <TableBodyCell class="justify-center w-14 px-0.5 sm:px-3">
-                <div class="flex items-center justify-center min-w-[54px] max-w-[54px]">
+              <TableBodyCell class="justify-center w-14 px-0.5">
+                <div class="flex items-center justify-center">
                   <CommentAndHint
                     uniqueId={getUniqueIdUsing(workBookTask.taskId)}
                     commentAndHint={workBookTask.comment}