diff --git a/hledger-web/static/hledger.css b/hledger-web/static/hledger.css
index 798447de1..effae01d3 100644
--- a/hledger-web/static/hledger.css
+++ b/hledger-web/static/hledger.css
@@ -158,8 +158,30 @@ ul {
     vertical-align:bottom;
 }
 
-.transactionsreport .posting td {
-    border: none !important;
+.transactionsreport {
+    margin-top: 1ex;
+    border-top: solid 2px #ddd;
+}
+
+.transaction {
+    border-bottom-style: solid;
+    border-width: 1px;
+    border-color: #ddd;
+    padding-bottom: 1ex;
+    padding: 5px;
+}
+
+.transaction .title > * {
+    display: inline-block;
+}
+
+.postings {
+    padding-left: 2em;
+}
+
+.transaction .posting {
+    display: flex;
+    justify-content: space-between;
 }
 
 .negative {
diff --git a/hledger-web/templates/journal.hamlet b/hledger-web/templates/journal.hamlet
index 00481096f..0f8d6494b 100644
--- a/hledger-web/templates/journal.hamlet
+++ b/hledger-web/templates/journal.hamlet
@@ -6,32 +6,23 @@ $if elem AddPermission perms
      data-toggle="modal" data-target="#addmodal" title="Lisää uusi tapahtuma kirjanpitoon.">
     Kirjaa tapahtuma
 
-<div .table-responsive>
-  <table .transactionsreport .table .table-condensed>
-    <thead>
-      <th .date style="text-align:left;">Päiväys
-      <th .description style="text-align:left;">Selite
-      <th .account style="text-align:left;">Tili
-      <th .amount style="text-align:right;">Summa
-
+  <ol .transactionsreport .list-unstyled>
     $forall torig <- items
-      <tr .title ##{transactionFrag torig} title="#{showTransaction torig}">
-        <td .date nowrap>
-          #{show (tdate torig)}
-        <td colspan=2>
-          #{textElideRight 60 (tdescription torig)}
-        <td .amount style="text-align:right;">
+      <li .transaction ##{transactionFrag torig}>
+        <div .title title="#{showTransaction torig}">
+          <time .date datetime="#{show (tdate torig)}" nowrap>
+            #{show (tdate torig)}
+          <div>
+            #{textElideRight 60 (tdescription torig)}
 
-      $forall Posting { paccount = acc, pamount = amt } <- tpostings torig
-        <tr .posting>
-          <td>
-          <td>
-          <td>
-            &nbsp;
-            <a href="@?{acctlink acc}##{tindex torig}" title="#{acc}">
-              #{elideAccountName 40 acc}
-          <td .amount style="text-align:right;">
-            ^{mixedAmountAsHtml amt}
+        <ul .postings>
+          $forall Posting { paccount = acc, pamount = amt } <- tpostings torig
+            <li .posting>
+              <div .account>
+                <a href="@?{acctlink acc}##{tindex torig}" title="#{acc}">
+                  #{elideAccountName 40 acc}
+              <div .amount style="text-align:right;">
+                ^{mixedAmountAsHtml amt}
 
 $if elem AddPermission perms
   ^{addModal AddR j today}