Question Structure v2 (with Header in Modal)

2nd version of the question structure with animation and header in the modal.

by luke_pascoe

HTML

<html>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

  <body>

    <table style="width:100%">
      <tr>
        <th>OO 01.1</th>
        <th>In which country does your organisation currently reside?</th>

        <div class="page-container">
          <div class="container">
            <br />
            <th><button type="button" class="btn launch-scroll modal-button"><i span class="fa fa-info-circle" ; style="font-size: 1.5vw; color:#0087cd" /></button></th>
          </div>
        </div>
        <div class="modal fade" id="modal-scroll">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>


                </button>
                <h4 class="modal-title">Explanatory Notes</h4>

              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-xs-12">
                    <p>
                      Please see the definitions tab for guidance on how to categorise your organisation.</p>

                    <p>Please contact the PRI at reporting@unpri.org before responding 'Other' as this may render benchmarking results less useful for your organisation and your peers.</p>

                    <p>Asset owners</p>

                    <p>Asset owners should select the category that most closely represents their organisation. For example, if the organisation holds both pension and insurance funds, select the category that accounts for the largest proportion...

CSS

.modal {
    overflow: hidden;
}
.modal .modal-body {
    height: 500px;
    overflow: auto;
}

.modal-button {
  border: none;
  padding: 0;
  background: none;
}

/* LUKE CSS Table Fixed Width */

body {
  padding: 14px;
  text-align: left;
  font-family: Century Gothic;
}

table {
  width: 100%;
  margin: 20px auto;
  table-layout: auto;
}

.fixed {
  table-layout: fixed;
}

table, th, td {
  border: 1px none;
  border-collapse: collapse;
}

th,
td {
  padding: 5px}
th{
  text-align: left;
  vertical-align: bottom;
  font-size: 15px;
}

/*determines the width of the table*/
.w {
  width: 400px;
}

/*adds a border only on the bottom side of the table*/
tr {
border-bottom: 1px solid #ccc;
}

JavaScript

$('.launch-scroll').on('click', function(e) {
  $('#modal-scroll').modal({
    show: true
  });
});