diff --git a/src/components/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx b/src/components/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx
index e59a9fda..15d74353 100644
--- a/src/components/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx
+++ b/src/components/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx
@@ -93,17 +93,19 @@ const BranchLocationFilteringTable = ({items}: Props) => {
         </fieldset>
       </form>
 
-      <Table className="responsive-table responsive-table-branches ml-[-20px] sm:ml-0">
+      <Table className="responsive-table responsive-table-branches sm:ml-0">
         <Thead className="sr-only lg:not-sr-only">
           <Tr className="block sm:hidden lg:!table-row">
             <Th className="type-1 block min-w-[100px] pl-[0px] md:table-cell lg:pr-16" scope="col">
               <span className="sr-only">Photo</span>
             </Th>
-            <Th className="type-1 block min-w-[100px] whitespace-nowrap pl-[0px] text-center md:table-cell md:text-left lg:pr-80">
+            <Th className="type-1 block min-w-[100px] whitespace-nowrap pl-[0px] text-center md:table-cell md:text-left lg:pr-20 xl:pr-80">
               Library
             </Th>
-            <Th className="type-1 block whitespace-nowrap pl-[0px] text-center md:table-cell lg:pr-80">Open/Closed</Th>
-            <Th className="type-1 block whitespace-nowrap pl-[0px] text-center md:table-cell md:text-left lg:pr-80">
+            <Th className="type-1 block whitespace-nowrap pl-[0px] text-center md:table-cell lg:pr-20 xl:pr-80">
+              Open/Closed
+            </Th>
+            <Th className="type-1 block whitespace-nowrap pl-[0px] text-center md:table-cell md:text-left lg:pr-20 xl:pr-80">
               Contact
             </Th>
             <Th className="type-1 block whitespace-nowrap pl-[0px] text-center md:table-cell md:text-left">Address</Th>
@@ -126,38 +128,42 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
       className="block sm:flex-col sm:flex-wrap sm:text-center md:grid md:grid-cols-2 md:grid-rows-[repeat(4,minmax(0,auto))] md:justify-items-start md:gap-x-20 md:text-left md:align-top lg:!table-row lg:max-h-none"
     >
       <Td className="table-image m-auto flex min-h-fit w-auto place-content-center justify-center sm:border-b sm:border-black-40 md:row-span-4 lg:mr-25 lg:table-cell lg:w-[125px] lg:pr-16 lg:align-middle">
-        <div className="relative block aspect-[3/2] w-auto max-w-[338px] overflow-hidden md:w-[290px] lg:max-w-[125px]">
-          {imageUrl && (
-            <Link
-              href={path}
-              className="relative block aspect-[3/2] w-[300px] overflow-hidden md:w-[290px] lg:max-w-[125px]"
-              aria-hidden="true"
-              tabIndex={-1}
-            >
-              <Image src={imageUrl} className="object-contain" alt="" fill sizes="300px" />
-            </Link>
-          )}
-        </div>
+        {imageUrl && (
+          <Link
+            href={path}
+            className="relative my-16 block aspect-[3/2] w-[300px] max-w-[338px] overflow-hidden md:w-[360px] lg:max-w-[125px]"
+            aria-hidden="true"
+            tabIndex={-1}
+          >
+            <Image src={imageUrl} className="object-contain" alt="" fill sizes="300px" />
+          </Link>
+        )}
       </Td>
       <Th
         scope="row"
-        className="flex w-auto pl-0 md:text-left lg:table-cell lg:w-1/4 lg:border-b lg:border-black-40 lg:pr-80 lg:align-middle"
+        className="flex w-auto px-0 text-center md:text-left lg:table-cell lg:w-1/4 lg:border-b lg:border-black-40 lg:pr-20 lg:align-middle xl:pr-80"
       >
         <Link
           href={path}
-          className="inline-block w-full text-center text-[20px] font-semibold no-underline hover:bg-black-10 hover:text-brick-dark focus:bg-none focus:text-cardinal-red active:text-cardinal-red hocus:underline md:w-auto md:text-left"
+          className="m-auto mb-16 inline-block w-fit text-center text-[20px] font-semibold no-underline hover:bg-black-10 hover:text-brick-dark focus:bg-none focus:text-cardinal-red active:text-cardinal-red hocus:underline md:m-[unset] md:w-auto md:text-left"
         >
-          <h2 className="font-sans text-20 font-semibold">{title}</h2>
+          <h2 className="mb-0 font-sans text-20 font-semibold">{title}</h2>
         </Link>
       </Th>
-      <Td className="branch-hours flex w-auto justify-center sm:border-b sm:border-black-40 md:items-center md:justify-start lg:table-cell lg:w-1/4 lg:pr-80 lg:align-middle">
-        {hoursId && <BranchHours hoursId={hoursId} />}
+      <Td className="branch-hours flex w-auto justify-center sm:border-b sm:border-black-40 md:items-center md:justify-start lg:table-cell lg:w-1/4 lg:pr-20 lg:align-middle xl:pr-80">
+        {hoursId && (
+          <div className="pb-16 lg:pb-0">
+            <BranchHours hoursId={hoursId} />
+          </div>
+        )}
+        {/* Without this, the responsive table library injects a "&nbsp;". */}
+        {""}
       </Td>
-      <Td className="block w-auto sm:border-b sm:border-black-40 lg:table-cell lg:w-1/4 lg:pr-80 lg:align-middle">
+      <Td className="block w-auto sm:border-b sm:border-black-40 lg:table-cell lg:w-1/4 lg:pr-20 lg:align-middle xl:pr-80">
         {phone && (
           <a
             href={`tel:${phone.replaceAll(/[^0-9]/g, "")}`}
-            className="flex items-center justify-center gap-4 text-16 font-normal leading-[23px] no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:justify-start lg:inline-flex"
+            className="m-auto flex w-fit items-center justify-center gap-4 text-16 font-normal leading-[23px] no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:m-[unset] md:justify-start"
           >
             <PhoneIcon title="Phone Number" width={20} />
             {phone}
@@ -166,22 +172,26 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
         {email && (
           <a
             href={`mailto:${email}`}
-            className="flex items-center justify-center gap-4 text-16 font-normal leading-[23px] no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:justify-start lg:inline-flex"
+            className="m-auto mb-16 flex w-fit items-center justify-center gap-4 text-16 font-normal leading-[23px] no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:mx-[unset] md:justify-start lg:mb-0"
           >
             <EnvelopeIcon title="Email" width={20} />
             {email}
           </a>
         )}
+        {/* Without this, the responsive table library injects a "&nbsp;". */}
+        {""}
       </Td>
       <Td className="block w-auto text-16 leading-[23px] sm:border-b sm:border-black-40 lg:table-cell lg:w-1/4 lg:align-middle">
         {address && mapUrl && (
-          <a href={mapUrl} className="flex items-center justify-center gap-4 md:justify-start">
-            <MapPinIcon title="Map" width={20} className="min-w-20" />
-            <Address
-              {...address}
-              className="text-center font-normal no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:text-left"
-            />
-          </a>
+          <div className="pb-16 lg:pb-0">
+            <a href={mapUrl} className="flex items-center justify-center gap-4 md:justify-start">
+              <MapPinIcon title="Map" width={20} className="min-w-20" />
+              <Address
+                {...address}
+                className="text-center font-normal no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:text-left"
+              />
+            </a>
+          </div>
         )}
       </Td>
     </Tr>
diff --git a/src/components/views/sul-people/sul-people-table-view.tsx b/src/components/views/sul-people/sul-people-table-view.tsx
index 5e5c154d..421b0bec 100644
--- a/src/components/views/sul-people/sul-people-table-view.tsx
+++ b/src/components/views/sul-people/sul-people-table-view.tsx
@@ -183,13 +183,13 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
             {displayedItems.map(item => (
               <Tr
                 key={item.id}
-                className="block sm:flex-col sm:flex-wrap md:grid md:grid-cols-2 md:grid-rows-[repeat(5,minmax(0,auto))] md:justify-items-start md:gap-x-20 md:pt-16 md:text-left md:first:pt-0 lg:!table-row lg:max-h-none"
+                className="block pt-16 sm:flex-col sm:flex-wrap md:grid md:grid-cols-2 md:grid-rows-[repeat(5,minmax(0,auto))] md:justify-items-start md:gap-x-20 md:text-left md:first:pt-0 lg:!table-row lg:max-h-none"
               >
                 <Td className="table-image m-auto flex min-h-fit w-auto place-content-center justify-center sm:border-b sm:border-black-40 sm:first:border-0 md:row-span-5 lg:table-cell lg:min-h-fit lg:w-[125px]">
                   {item.photoUrl && (
                     <Link
                       href={item.path}
-                      className="relative block aspect-[1/1] w-[200px] overflow-hidden rounded-full lg:w-[68px]"
+                      className="relative mb-16 block aspect-[1/1] w-[200px] overflow-hidden rounded-full md:mb-32 lg:mb-0 lg:w-[68px]"
                       aria-hidden="true"
                       tabIndex={-1}
                     >
@@ -210,18 +210,20 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
                   {item.title && (
                     <Link
                       href={item.path}
-                      className="inline-block text-digital-blue no-underline hover:bg-black-10 hover:text-brick-dark focus:bg-none focus:text-cardinal-red active:text-cardinal-red hocus:underline"
+                      className="mb-16 inline-block text-digital-blue no-underline hover:bg-black-10 hover:text-brick-dark focus:bg-none focus:text-cardinal-red active:text-cardinal-red hocus:underline"
                     >
-                      <HeadingElement className="font-sans text-20 font-semibold" id={item.id}>
+                      <HeadingElement className="mb-0 font-sans text-20 font-semibold" id={item.id}>
                         {item.title}
                       </HeadingElement>
                     </Link>
                   )}
-                  {item.fullTitle && <div className="text-16 font-normal leading-[23px]">{item.fullTitle}</div>}
+                  {item.fullTitle && (
+                    <div className="pb-16 text-16 font-normal leading-[23px] lg:pb-0">{item.fullTitle}</div>
+                  )}
                 </Th>
                 <Td className="min-w-1/5 block w-auto px-0 py-16 text-center md:border-b md:border-black-40 md:px-9 md:py-16 md:text-left lg:table-cell lg:w-2/5 lg:pr-72">
                   {!!item.researchAreas?.length && (
-                    <div className="bg-black-10 px-1em py-1em text-16 leading-[23px] md:bg-transparent md:p-0">
+                    <div className="mb-16 bg-black-10 px-1em py-1em text-16 leading-[23px] md:bg-transparent md:p-0 lg:mb-0">
                       <span className="font-bold md:hidden">Expertise: </span>
                       {item.researchAreas.join(", ")}
                     </div>
@@ -229,7 +231,7 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
                 </Td>
                 <Td className="block w-auto px-0 py-16 text-center md:border-b md:border-black-40 md:px-9 md:py-16 md:text-left lg:table-cell lg:w-1/5 lg:pr-72">
                   {item.email && (
-                    <>
+                    <div className="pb-16 lg:pb-0">
                       <Link
                         href={`mailto:${item.email}`}
                         prefetch={false}
@@ -238,11 +240,17 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
                         <EnvelopeIcon title="Email" width={20} className="mr-6 inline-block" />
                         {item.email}
                       </Link>
-                    </>
+                    </div>
                   )}
                 </Td>
                 <Td className="block w-auto px-0 py-16 text-center md:border-b md:border-black-40 md:px-9 md:py-16 md:text-left lg:table-cell lg:w-1/5">
-                  {item.libCalId && <LibCal libcalId={item.libCalId} srText={item.title} />}
+                  {item.libCalId && (
+                    <div className="pb-16 lg:pb-0">
+                      <LibCal libcalId={item.libCalId} srText={item.title} />
+                    </div>
+                  )}
+                  {/* Without this, the responsive table library injects a "&nbsp;". */}
+                  {""}
                 </Td>
               </Tr>
             ))}
diff --git a/src/components/views/sul-study-place/filtering-table/study-place-filtering-table.tsx b/src/components/views/sul-study-place/filtering-table/study-place-filtering-table.tsx
index c17891bf..293522f1 100644
--- a/src/components/views/sul-study-place/filtering-table/study-place-filtering-table.tsx
+++ b/src/components/views/sul-study-place/filtering-table/study-place-filtering-table.tsx
@@ -211,7 +211,7 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
               >
                 <Td className="table-image m-auto block min-h-fit w-auto place-content-center justify-center sm:border-b sm:border-black-40 md:row-span-5 lg:table-cell lg:min-h-fit lg:w-[125px] lg:pr-32">
                   {item.branchImageUrl && (
-                    <div className="relative block aspect-[3/2] w-auto max-w-[338px] overflow-hidden md:w-[290px] lg:max-w-[125px]">
+                    <div className="relative my-16 block aspect-[3/2] w-auto max-w-[338px] overflow-hidden md:w-[360px] lg:max-w-[125px]">
                       <Image
                         className="object-contain"
                         src={item.branchImageUrl}
@@ -221,6 +221,8 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
                       />
                     </div>
                   )}
+                  {/* Without this, the responsive table library injects a "&nbsp;". */}
+                  {""}
                 </Td>
                 <Th
                   scope="row"
@@ -237,17 +239,23 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
                 <Td className="min-w-1/5 block w-auto sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-1/5 lg:pr-32">
                   <Link
                     href={item.branchPath}
-                    className="block w-fit text-16 font-normal leading-[23px] underline transition-colors hover:bg-black-10 hover:text-brick-dark hover:no-underline focus:bg-none focus:text-cardinal-red active:text-cardinal-red"
+                    className="mb-16 block w-fit text-16 font-normal leading-[23px] underline transition-colors hover:bg-black-10 hover:text-brick-dark hover:no-underline focus:bg-none focus:text-cardinal-red active:text-cardinal-red lg:mb-0"
                   >
                     <div>{item.branchTitle}</div>
                   </Link>
                 </Td>
-                <Td className="justify-left flex w-auto text-16 leading-[23px] sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-1/5 lg:pr-32">
-                  {item.libHours && <BranchHours hoursId={item.libHours} />}
+                <Td className="justify-left flex w-auto sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-1/5 lg:pr-32">
+                  {item.libHours && (
+                    <div className="pb-16 text-16 leading-[23px] lg:pb-0">
+                      {item.libHours && <BranchHours hoursId={item.libHours} />}
+                    </div>
+                  )}
+                  {/* Without this, the responsive table library injects a "&nbsp;". */}
+                  {""}
                 </Td>
                 <Td className="block w-auto sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-2/5 lg:pr-32">
                   {item.features && (
-                    <div className="bg-black-10 px-16 py-8 text-16 leading-[23px] lg:bg-transparent lg:p-0">
+                    <div className="mb-16 bg-black-10 px-16 py-8 text-16 leading-[23px] lg:mb-0 lg:bg-transparent lg:p-0">
                       <span className="bg-black-10 font-bold lg:hidden">Features: </span>
                       {item.features.join(", ")}
                     </div>
@@ -257,7 +265,7 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
                   {item.libCalId && (
                     <a
                       href={`https://appointments.library.stanford.edu/space/${item.libCalId}`}
-                      className="button w-fit whitespace-nowrap border border-solid border-cardinal-red bg-white py-[4px] text-16 leading-[22px] text-cardinal-red hocus:bg-cardinal-red hocus:text-white hocus:shadow-button md:w-full lg:w-fit"
+                      className="button mb-16 w-fit whitespace-nowrap border border-solid border-cardinal-red bg-white py-[4px] text-16 leading-[22px] text-cardinal-red hocus:bg-cardinal-red hocus:text-white hocus:shadow-button md:w-full lg:mb-0 lg:w-fit"
                       aria-haspopup="dialog"
                     >
                       <div className="flex items-center justify-end gap-xs md:justify-center lg:justify-end">
@@ -267,6 +275,8 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
                       </div>
                     </a>
                   )}
+                  {/* Without this, the responsive table library injects a "&nbsp;". */}
+                  {""}
                 </Td>
               </Tr>
             ))}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 546fb1e9..c4b5aa08 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -38,25 +38,17 @@
     border-bottom: 1px #ABABA9 solid !important;
   }
   .responsive-table tr td.pivoted {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
     padding-left: 0 !important;
     text-align: unset !important;
   }
   table.sul-people-table thead + tbody {
     border-top: 0;
   }
-  @media screen and (max-width: 55.29em) {
-    .responsive-table tr td.pivoted {
-      padding-top: 0 !important;
-      padding-bottom: 16px !important;
-    }
-    .responsive-table tr td.pivoted:first-of-type {
-      padding-top: 16px !important;
-    }
-  }
   .responsive-table ul li:last-child span {
     display: none;
   }
-
   @media screen and (max-width: 40em) {
     .responsiveTable.responsive-table-study td.table-image {
        display: block;