diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss
index 7e836e0d87..1354f6d051 100644
--- a/res/css/views/settings/_DevicesPanel.scss
+++ b/res/css/views/settings/_DevicesPanel.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_DevicesPanel {
-    display: table;
     table-layout: fixed;
     // Normally the panel is 880px, however this can easily overflow the container.
     // TODO: Fix the table to not be squishy
@@ -25,16 +24,16 @@ limitations under the License.
 }
 
 .mx_DevicesPanel_header {
-    display: table-header-group;
     font-weight: bold;
 }
 
-.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
     height: 48px; // make this tall so the table doesn't move down when the delete button appears
 }
 
-.mx_DevicesPanel_header > div {
-    display: table-cell;
+.mx_DevicesPanel_header th {
+    padding: 0px;
+    text-align: left;
     vertical-align: middle;
 }
 
@@ -50,12 +49,9 @@ limitations under the License.
     width: 20%;
 }
 
-.mx_DevicesPanel_device {
-    display: table-row;
-}
-
-.mx_DevicesPanel_device > div {
-    display: table-cell;
+.mx_DevicesPanel_device td {
+    vertical-align: baseline;
+    padding: 0px;
 }
 
 .mx_DevicesPanel_myDevice {
diff --git a/src/components/views/settings/DevicesPanel.tsx b/src/components/views/settings/DevicesPanel.tsx
index 9a1321619e..d66d0f42eb 100644
--- a/src/components/views/settings/DevicesPanel.tsx
+++ b/src/components/views/settings/DevicesPanel.tsx
@@ -218,17 +218,21 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");
         return (
-            <div className={classes}>
-                <div className="mx_DevicesPanel_header">
-                    <div className="mx_DevicesPanel_deviceId">{ _t("ID") }</div>
-                    <div className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</div>
-                    <div className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</div>
-                    <div className="mx_DevicesPanel_deviceButtons">
-                        { this.state.selectedDevices.length > 0 ? deleteButton : null }
-                    </div>
-                </div>
-                { devices.map(this.renderDevice) }
-            </div>
+            <table className={classes}>
+                <thead className="mx_DevicesPanel_header">
+                    <tr>
+                        <th className="mx_DevicesPanel_deviceId">{ _t("ID") }</th>
+                        <th className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</th>
+                        <th className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</th>
+                        <th className="mx_DevicesPanel_deviceButtons">
+                            { this.state.selectedDevices.length > 0 ? deleteButton : null }
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    { devices.map(this.renderDevice) }
+                </tbody>
+            </table>
         );
     }
 }
diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx
index d033bc41a9..1131114556 100644
--- a/src/components/views/settings/DevicesPanelEntry.tsx
+++ b/src/components/views/settings/DevicesPanelEntry.tsx
@@ -66,23 +66,23 @@ export default class DevicesPanelEntry extends React.Component<IProps> {
         }
 
         return (
-            <div className={"mx_DevicesPanel_device" + myDeviceClass}>
-                <div className="mx_DevicesPanel_deviceId">
+            <tr className={"mx_DevicesPanel_device" + myDeviceClass}>
+                <td className="mx_DevicesPanel_deviceId">
                     { device.device_id }
-                </div>
-                <div className="mx_DevicesPanel_deviceName">
+                </td>
+                <td className="mx_DevicesPanel_deviceName">
                     <EditableTextContainer initialValue={device.display_name}
                         onSubmit={this.onDisplayNameChanged}
                         placeholder={device.device_id}
                     />
-                </div>
-                <div className="mx_DevicesPanel_lastSeen">
+                </td>
+                <td className="mx_DevicesPanel_lastSeen">
                     { lastSeen }
-                </div>
-                <div className="mx_DevicesPanel_deviceButtons">
+                </td>
+                <td className="mx_DevicesPanel_deviceButtons">
                     <StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
-                </div>
-            </div>
+                </td>
+            </tr>
         );
     }
 }