Make table row height, font, and checkboxes, smaller

Topic: Make table row height, font, and checkboxes, smaller

iliketheinterwebs pro asked 6 years ago

How do I make table row height, font, and checkboxes smaller? I need the row height a bit smaller to resemble google spreadsheets a bit more. The table is in the Project tab section of the code. Thank you for your help.

Start your code here

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Permitting for PMNM</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet"> <style> .mdb-select { width: 97%; padding-left: 2.8rem; } .permit-category { width: 97%; padding-left: 4.0rem; } .md-form .prefix~input, .md-form .prefix~textarea { margin-left: 4rem; width: -webkit-calc(100% - 4rem); width: calc(100% -4rem); } .md-form .prefix~label { margin-left: 4rem; } .no-icon { margin-left: 4rem; } </style> </head>  <body class="fixed-sn mdb-skin"> <header>  <div id="nav"> <?php include('includes/nav.php'); ?> </div>  </header>   <div class="modal fade" id="permitCategoryModal" tabindex="-1" role="dialog" aria-labelledby="permitCategoryModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="permitCategoryModalLabel">Permit Categories</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <b>Conservation & Management -</b> <p>assists in the conservation and management of the Monument.</p> <b>Education -</b> <p>furthers the educational value of the Monument.</p> <b>Native Hawaiian Practices -</b> <p>cultural activities conducted for the purposes of perpetuating traditional knowledge, caring for and protecting the environment, and strengthening cultural and spiritual connections to the Northwestern Hawaiian Islands that have demonstrable benefits to the Native Hawaiian community.</p> <b>Recreation -</b> <p>activities conducted for personal enjoyment that do not result in the extraction of Monument resources and that do not involve a fee-for-service transaction.</p> <b>Research -</b> <p>activities designed to further understanding of Monument resources and qualities.</p> <b>Special Ocean Use -</b> <p>activities engaged in to generate revenue or profits for one or more of the persons associated with the...[need access to site]</p> </div> </div> </div> </div>   <main>  <ul class="nav nav-tabs orange nav-justified"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Summary</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Personnel</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Project</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel4" role="tab">Criteria/Findings</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel5" role="tab">Other Info</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel6" role="tab">Uploads</a> </li> </ul>  <div class="tab-content card">  <div class="tab-pane fade in show active" id="panel1" role="tabpanel"> <br>  <p class="mb-1 dark-grey-text text-center">This Permit Application Cover Sheet is intented to provide summary information and status to the public on permit applications for activities proposed to be conducted in the Papahānaumokuākea Marine National Monument. While a permit application has been received, it has not been fully reviewewd nor approved by the Monument Management Board to date. The Monument permit process also ensures that all environmental reviews are conducted prior to the issuance of a Monument permit.</p> <p class="mb-1 dark-grey-text text-center">* indicates a required field</p>  <form>  <div class="form-row">  <div class="col">  <div class="md-form form-group"> <i class="fa fa-user prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Applicant Name" data-content="The name of the person who is in charge of the proposed activity and who will be responsible for all the personnel and actions under the authority of the requested Monument permit."></i> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name*</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name*</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group"> <i class="fa fa-book prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Affiliation" data-content="..."></i> <input type="text" class="form-control" id="inputAffiliation"> <label for="inputAffiliation">Affiliation</label> </div> </div>  </div>   <div class="form-row">  <div class="md-form col-md-4"> <i class="fa fa-folder prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="modal" data-target="#permitCategoryModal"></i>  <select class="mdb-select permit-category colorful-select dropdown-warning"> <option value="" disabled selected>Select Permit Category*</option> <option value="1">Research</option> <option value="2" selected>Education</option> <option value="3">Conservation and Management</option> <option value="4">Native Hawaiian Practices</option> <option value="5">Special Ocean Use</option> <option value="6">Recreation</option> </select> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form"> <i class="fa fa-calendar prefix grey-text"></i> <input type="text" class="form-control datepicker" id="inputDatePicker"> <label for="inputDatePicker">Start Date*</label> </div> </div>   <div class="col">  <div class="md-form"> <input type="text" class="form-control datepicker" id="inputDatePicker"> <label for="inputDatePicker">End Date*</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group"> <i class="fa fa-book prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Project Title" data-content="Provide a descriptive title for your proposed project."></i> <input type="text" class="form-control" id="inputProject"> <label for="inputProject">Project Name</label> </div> </div>  </div>   <div class="form-row form-inline no-icon">  <p class="dark-grey-text"> Proposed Method of Entry:</p>  <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineFormCheckbox1"> <label class="form-check-label" for="inlineFormCheckbox1">Vessel</label> </div>  <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineFormCheckbox2"> <label class="form-check-label" for="inlineFormCheckbox2">Plane</label> </div> </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputVessel"> <label for="inputVessel">Vessel name/identification if known:</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Proposed Locations" data-content="..."></i>  <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">Proposed Locations</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div>  </div>   <div class="row">  <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Estimated # of people" data-content="Estimated number of individuals (including Applicant) to be covered under this permit. If unknown at the time of this application, use your best estimate available. An accurate number of people must be provided within the Compliance Information Sheet:"></i>  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputPeopleAmount"> <label for="inputPeopleAmount">Estimated number of individuals (including Applicant) to be covered under this permit.</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Estimated # of days" data-content="..."></i>  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputDays"> <label for="inputDays">Estimated number of days in the monument:</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12"> <p class="dark-grey-text no-icon">Description of proposed activities: (complete these sentences):</p>  <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="The proposed activity would..." data-content="..."></i> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">The proposed activity would...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="To accomplish this activity we would..." data-content="..."></i> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">To accomplish this activity we would...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="This activity would help the Monument by..." data-content="..."></i> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">This activity would help the Monument by...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div>  </div>   <div class="row">  <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Other info" data-content="..."></i>  <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">Other information or background...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div>  </div>  </form>   <a href="#!" class="orange-text d-flex flex-row-reverse p-2"> <button type="button" class="btn blue-gradient btn-lg">Next</button> <button type="button" class="btn peach-gradient btn-lg">Save</button> <button type="button" class="btn blue-gradient btn-lg">Back</button> </a> </div>   <div class="tab-pane fade" id="panel2" role="tabpanel"> <br>  <p class="mb-1 dark-grey-text text-center">Applicant Information</p> <p class="mb-1 dark-grey-text text-center">* indicates required field</p>  <form>  <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">1. Applicant</p> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Applicant Name" data-content="The name of the person who is in charge of the proposed activity and who will be responsible for all the personnel and actions under the authority of the requested Monument permit."></i> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name*</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name*</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputTitle"> <label for="inputTitle">Title</label> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">1a. Intended field Principal Investigator</p> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Field Principal Investigator" data-content="..."></i> <input type="text" class="form-control" id="inputFieldFirstName"> <label for="inputFieldFirstName">Field PI First Name</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputFieldMiddleInitial"> <label for="inputFieldMiddleInitial">Field PI Middle Initial</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputFieldLastName"> <label for="inputFieldLastName">Field PI Last Name</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputFieldTitle"> <label for="inputFieldTitle">Field PI Title</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputAffiliation"> <label for="inputAffiliation">Field PI Affiliation</label> </div> </div>  </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputStreetAddress"> <label for="inputStreetAddress">Field PI Mailing Address/P.O. Box</label> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCity"> <label for="inputCity">City</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputState"> <label for="inputState">State</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputZipCode"> <label for="inputZipCode">Zip/International Postal Code</label> </div> </div>  </div>   <div class="row">  <div class="col-md-5">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCountry"> <label for="inputCountry">Country</label> </div> </div>  </div>   <div class="form-row">  <div class="col-md-2">  <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Phone Country Code" data-content="Phone Country Code (e.g. United States= 001)"></i> <input type="text" class="form-control" id="inputPhoneCountryCode"> <label for="inputPhoneCountryCode">Country Code:</label> </div> </div>   <div class="col-md-5">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputPhone"> <label for="inputPhone">Phone Number:</label> </div> </div>   <div class="col-md-5">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputFax"> <label for="inputFax">Fax:</label> </div> </div>  </div>   <div class="row">  <div class="col-md-5">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputEmail"> <label for="inputEmail">Email</label> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">2. Mailing Address</p> </div>  </div>   <div class="row">  <div class="col-md-12">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputStreetAddress"> <label for="inputStreetAddress">Mailing Address/P.O. Box</label> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCity"> <label for="inputCity">City</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputState"> <label for="inputState">State</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputZipCode"> <label for="inputZipCode">Zip/International Postal Code</label> </div> </div>  </div>   <div class="row">  <div class="col-md-5">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCountry"> <label for="inputCountry">Country</label> </div> </div>  </div>   <div class="form-row">  <div class="col-md-2">  <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Phone Country Code" data-content="Phone Country Code (e.g. United States= 001)"></i> <input type="text" class="form-control" id="inputPhoneCountryCode"> <label for="inputPhoneCountryCode">Country Code:</label> </div> </div>   <div class="col-md-5">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputPhone"> <label for="inputPhone">Phone Number:</label> </div> </div>   <div class="col-md-5">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputFax"> <label for="inputFax">Fax:</label> </div> </div>  </div>   <div class="row">  <div class="col-md-5">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputEmail"> <label for="inputEmail">Email</label> </div> </div>  </div>   <div class="form-row"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Field Principal Investigator" data-content="..."></i>  <div class="col"> <p class="dark-grey-text font-weight-bold">For students, major professor's name, telephone and email address:</p> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name</label> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputPhone"> <label for="inputPhone">Phone:</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputFax"> <label for="inputFax">Fax:</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputEmail"> <label for="inputEmail">Email</label> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">3. Affiliation</p> </div>  </div>   <div class="row">  <div class="col">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputAffiliation"> <label for="inputAffiliation">Affiliation</label> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">4.Additional persons to be covered by permit: *</p> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Role</label> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group"> <button type="button" class="btn btn-outline-warning waves-effect"> Add New</button> </div> </div>  </div>  </form>   <a href="#!" class="orange-text d-flex flex-row-reverse p-2"> <button type="button" class="btn blue-gradient btn-lg">Next</button> <button type="button" class="btn peach-gradient btn-lg">Save</button> <button type="button" class="btn blue-gradient btn-lg">Back</button> </a> </div>   <div class="tab-pane fade" id="panel3" role="tabpanel"> <br> <p class="mb-1 dark-grey-text text-center">Project Information</p> <p>*indicated a required field</p>  <form>  <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">5a. Project Location(s):</p>  <table class="table table-bordered table-responsive-md">  <thead> <tr> <th>Location</th> <th>Land-based</th> <th>Ocean-based: Shallow water</th> <th>Ocean-based: Deep water</th> </tr> </thead>   <tbody> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Nihoa</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Necker Island (Mokumanamana)</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">French Frigate Shoals</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Gardner Pinnacles</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Maro Reef</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Laysan Island</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Lisianski Island, Neva Shoal</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Pearl and Hermes Atoll</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Midway Atoll</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Kure Atoll</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Other</label> </div> </td> <td></td> <td></td> <td></td> </tr> </tbody>  </table>   <table class="table table-borderless">  <thead> <tr> <th></th> <th></th> </tr> </thead>   <tbody> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Remaining ashore on any island or atoll (with the exception of Midway & Kure Atolls and field camp staff on other islands/atolls) between sunset and sunrise.</td> </tr> </tbody>  </table>  </div>  </div>   <div class="form-row">  <div class="col"> <p class="grey-text">NOTE: Shallow water is defined by water less than 100 meters in depth.</p> <p class="grey-text">NOTE: There is a fee schedule for people visiting Midway Atoll National Wildlife via vessel and aircraft.</p> </div>  </div>   <div class="row">  <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Location Description" data-content="..."></i>  <div class="form-group dark-grey-text"> <label for="proposedLocations">Location Description:</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">5b. Check all applicable regulated activities proposed to be conducted in the Monument:</p>  <table class="table table-borderless">  <thead> <tr> <th></th> <th></th> </tr> </thead>   <tbody> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Removing, moving, taking, harvesting, posseessing, injuring, disturbing, or damaging any living or nonliving Monument resource</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Drilling into, dredging, or otherwise altering the submerged lands other than by anchoring a vessel; or constructing, placing, or abandoning any structure, material, or other matter on the submerged lands</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Anchoring a vessel</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Deserting a vessel aground, at anchor, or adrift</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Discharging or depositing any material or matter into the Monument</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Touching coral, living or dead</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Possessing fishing gear except when stowed and not available for immediate use during passage without interruption through the Monument</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Attracting any living Monument resource</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Sustenance fishing (Federal waters only, outside of Special Preservation Areas, Ecological Reserves and Special Management Areas)</td> </tr> </tbody>  </table>  </div>  </div>   <div class="row">  <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Purpose/Need/Scope" data-content="..."></i>  <div class="form-group dark-grey-text font-weight-bold"> <label for="proposedActivities">6. Purpose/Need/Scope (State purpose of proposed activities)*:</label> <textarea class="form-control" id="proposedActivities" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text">*Considering the purpose of the proposed activities, do you intend to film / photograph federally protected species?</p>  <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline1" value="option1" checked> <label class="form-check-label" for="exampleRadiosInline1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline2" value="option2"> <label class="form-check-label" for="exampleRadiosInline2"> No </label> </div> </form>  </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="filmPhotograph">If so, please list the species you specifically intend to target.</label> <textarea class="form-control" id="filmPhotograph" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <p class="mb-0">For a list of terrestrial species protected under the Endangered Species Act visit:</p> <a href="http://www.fws.gov/endangered/">http://www.fws.gov/endangered/</a> <p class="mt-3 mb-0">For a list of marine species protected under the Endangered Species Act visit:</p> <a href="http://www.nmfs.noaa.gov/pr/species/esa/">http://www.nmfs.noaa.gov/pr/species/esa/</a> <p class="mt-3 mb-0">For information about species protected under the Marine Mammal Protection Act visit:</p> <a href="http://www.nmfs.noaa.gov/pr/laws/mmpa/">http://www.nmfs.noaa.gov/pr/laws/mmpa/</a> </div>  </div>   <div class="form-row">  <div class="col">  <p class="dark-grey-text font-weight-bold mt-3">7. Answer the Findings below by providing information that you believe will assist the Co-Trustees in determining how your proposed activities are compatible with the conservation and management of the natural, historic, and cultural resources of the Monument:</p> <p class="dark-grey-text">The Findings are as follows:</p> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activitySafeguards">a. How can the activity be conducted with adequate safeguards for the cultural, natural, and historic resources and ecological integrity of the Monument?</label> <textarea class="form-control" id="activitySafeguards" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activityCompatible">b. How will the activity be conducted in a manner compatible with the management direction of this proclamation, considering the extent to which the conduct of the activity may diminish or enhance Monument cultural, natural, and historic resources, qualities, and ecological integrity, any indirect, secondary, or cumulative effects of the activity, and the duration of such effects?</label> <textarea class="form-control" id="activityCompatible" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activityAlternative">c.Is there a practicable alternative to conducting the activity within the Monument? If not, explain why your activities must be conducted in the Monument.</label> <textarea class="form-control" id="activityAlternative" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activityValue">d. How does the end value of the activity outweight its adverse impacts on the Monument culural, natural and historic resources, qualities, and ecological integrity?</label> <textarea class="form-control" id="activityValue" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activityDuration">e. Explain how the duration of the activity is no longer than necessary to achieve its stated purpose?</label> <textarea class="form-control" id="activityDuration" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activityQualification">f. Provide information demonstrating that you are qualified to conduct and complete the activity and mitigate any potential impacts resulting from its conduct?</label> <textarea class="form-control" id="activityQualification" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activityMethods">h. Explain how your methods and procedures are appropriate to acheive the proposed activity's goals in relation to their impacts to Monument cultural, natural, and historic resources, qualities, and ecological integrity?</label> <textarea class="form-control" id="activityMethods" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="vesselComply">i. Has your vessel been outfitted with a mobile transceiver unit approved by OLE and complies wth the requirements of Presidential Proclamation 8031?</label> <textarea class="form-control" id="vesselComply" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activityOther">j. Demonstrate that there are no other factors that would make the issuance of a permit for the activity inappropriate?</label> <textarea class="form-control" id="activityOther" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="proceduresMethods">8. Procedures/Methods:</label> <p class="dark-grey-text font-weight-bold">NOTE: If land or marine archaeological activities are involved, contact the Monument Permit Coordinator at the address on the general application before proceeding.</p> <textarea class="form-control" id="proceduresMethods" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">9a. Collection of specimens - collecting activities (would apply to any activity): organisms or objects (List of species):</p> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="commonName"> <label for="commonName">Common Name</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="scientificName"> <label for="scientificName">Scientific Name</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="sampleCount"> <label for="sampleCount">Sample Count</label> </div> </div>  </div>   <div class="form-row">   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="unitSize"> <label for="unitSize">Unit Size</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="locationOrganism"> <label for="locationOrganism">Location</label> </div> </div>   <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="wholePartialOrg"> <label for="wholePartialOrg">Whole/Partial Organism</label> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="md-form form-group"> <button type="button" class="btn btn-outline-warning waves-effect"> Add New</button> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="afterSpecimen">9b. What will be done with the specimens after the project has ended?:</label> <textarea class="form-control" id="afterSpecimen" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text font-weight-bold">9c. Will the organism be kept alive after collection?</p>  <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline1" value="option1" checked> <label class="form-check-label" for="exampleRadiosInline1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline2" value="option2"> <label class="form-check-label" for="exampleRadiosInline2"> No </label> </div> </form>  </div>  </div>   <div class="row">  <div class="col">  <div class="md-form form-group"> <input type="text" class="form-control" id="siteLocation"> <label for="siteLocation">*Specific site/location:</label> </div> </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text">Is it an open or closed system?</p>  <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="open" value="option1" checked> <label class="form-check-label" for="openRadio"> Open </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="closedRadio" value="option2"> <label class="form-check-label" for="closedRadio"> Closed </label> </div> </form>  </div>  </div>   <div class="form-row">  <div class="col"> <p class="dark-grey-text">Is there an outfall?</p>  <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline1" value="option1" checked> <label class="form-check-label" for="exampleRadiosInline1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline2" value="option2"> <label class="form-check-label" for="exampleRadiosInline2"> No </label> </div> </form>  </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="housedOrganisms">Will these organisms be housed with other organisms? If so, what are the other organisms?</label> <textarea class="form-control" id="housedOrganisms" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="organismsReleased">Will organisms be released? If so, what are they?</label> <textarea class="form-control" id="organismsReleased" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="samplesTransported">10.If applicable, how will the collected samples be transported out of the Monument?</label> <textarea class="form-control" id="samplesTransported" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="activityCurriculum">11.Is your proposed activity based on a Department of Education Standards Based Curriculum? If so, describe:</label> <textarea class="form-control" id="activityCurriculum" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="activityCollab">12. If applicable, describe how you are collaborating with others in any way to reduce duplicative activities in the Monument or elsewhere?</label> <textarea class="form-control" id="activityCollab" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="activityPublish">13.What materials, products or deliverables will be developed as a result of your proposed activity? Provide a time line for write-up and publication of information or production of educational materials:</label> <textarea class="form-control" id="activityPublish" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="gearMaterials">14.List all specialized gear and materials to be used in this activity:</label> <textarea class="form-control" id="gearMaterials" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="hazardous">15.List all Hazardous Materials you propose to take to and use within the Monument:</label> <textarea class="form-control" id="hazardous" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="fixedInstallations">Describe any fixed installations and instrumentation proposed to be set in the Monument:</label> <textarea class="form-control" id="fixedInstallations" rows="5"></textarea> </div> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text font-weight-bold"> <label for="applicantPublication">17.List all Applicants' publications/references directly related to the proposed project:</label> <textarea class="form-control" id="applicantPublication" rows="5"></textarea> </div> </div>  </div>   <a href="#!" class="orange-text d-flex flex-row-reverse p-2"> <button type="button" class="btn blue-gradient btn-lg">Next</button> <button type="button" class="btn peach-gradient btn-lg">Save</button> <button type="button" class="btn blue-gradient btn-lg">Back</button> </a>  </form>  </div>   <div class="tab-pane fade" id="panel4" role="tabpanel"> <br> <p class="text-center">Critical Findings</p>  <div class="form-row">  <div class="col">  <p class="dark-grey-text font-weight-bold mt-3">12. Answer the Findings below by providing information that you believe will assist the Co-Trustees in determining how your proposed activities are compatible with the conservation and management of the natural, historic, and cultural resources of the Monument:</p> <p class="dark-grey-text">The Findings are as follows:</p> </div>  </div>   <div class="form-row">  <div class="col">  <div class="form-group dark-grey-text"> <label for="activitySafeguards">a. How can the activity be conducted with adequate safeguards for the cultural, natural, and historic resources and ecological integrity of the Monument?</label> <textarea class="form-control" id="activitySafeguards" rows="5"></textarea> </div> </div>  </div>  </div>   <div class="tab-pane fade" id="panel5" role="tabpanel"> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </div>   <div class="tab-pane fade" id="panel6" role="tabpanel"> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </div>  </div>  </main>     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/mdb.min.js"></script>  <script> $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); // popovers Initialization $(function () { $('[data-toggle="popover"]').popover() }) // Data Picker Initialization $('.datepicker').pickadate(); // Material Select Initialization $(document).ready(function() { $('.mdb-select').material_select(); }); </script> </body> </html>

Add comment

Marta Wierzbicka staff answered 6 years ago

1 0 Best answer

Hi,

I'm not sure what this is happen, we will look at this case. You can add this CSS:

table.table td, table.table th {   padding-top: .2rem;   padding-bottom: .2rem;}

Best,
Marta

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, I'm not sure how you want to your table should look. With class .table-sm a table is going to be smaller if this size is not enough small for you, you need to add your custom CSS code to the table. Best, Marta

iliketheinterwebs pro commented 6 years ago

Hi Marta. The table looks great with the css and .table-sm that you gave me. I have another type of table in that code - which is an editable table. When I add the .table-sm and css to that table I didn't see any changes to the editable table. The only table that took effect was the regular table with checkboxes. Do you know why the editable table isn't working?

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, add the .table-sm class to this line: <table class="table table-bordered table-responsive-md">. In your CSS add this code below:

.form-check-input[type=checkbox]+label, 
label.btn input[type=checkbox]+label {

height: .5rem;
line-height: 1.5;
}
.form-check-input[type=checkbox]+label:before, 
.form-check-input[type=checkbox]:not(.filled-in)+label:after, 
label.btn input[type=checkbox]+label:before, 
label.btn input[type=checkbox]:not(.filled-in)+label:after {

width: 13px;
height: 13px;
border: 2px solid #8a8a8a;
}

Best, Marta

iliketheinterwebs pro commented 6 years ago

Thank you Marta. That worked for one of my tables. What if I want to make my editable table rows a little smaller and google spreadsheet like also? I tried using that class on the editable table but it didn't work. 9a. Collection of specimens - collecting activities (would apply to any activity): organisms or objects (List of species): Common Name Scientific Name Sample Count Unit Size Location Whole/Partial Organism Sort Remove Remove Remove

9a. Collection of specimens - collecting activities (would apply to any activity): organisms or objects (List of species):
                        
                        
                    
                    
                    
                    
                        
                        
                          
                          
                            
                                
                                    <a href="#!"><i></i></a>
                                    
                                        
                                            Common Name
                                            Scientific Name
                                            Sample Count
                                            Unit Size
                                            Location
                                            Whole/Partial Organism
                                            Sort
                                            Remove
                                        
                                        
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                                <a href="#!"><i></i></a>
                                                <a href="#!"><i></i></a>
                                            
                                            
                                                Remove
                                            
                                        
                                        
                                        
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                                <a href="#!"><i></i></a>
                                                <a href="#!"><i></i></a>
                                            
                                            
                                                Remove

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

iliketheinterwebs

Pro User 7Support score
16Questions 0Answers 0Snippets