CSS3 Gradients

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ejemplo drag drop</title>
        <style>
            
        </style>
    </head>
    <body>

        <header class="question-header">
          <h1>TABLA CONCEPTO CCA</h1>
          <p>Tabla de actividades dropeable </p>
        </header>
        <section class="question-body">
          <table class="table">
            <tr>
              <th class="keywords">Hora</th>
              <th class="answers">Sabado</th>
              <th class="answers">Domingo</th>
              <!--th class="options">Opciones</th-->
            </tr>
            <tr>
              <td class="keyword"><div>15:00</div></td>
              <td class="option"><div class="card">Caminar</div></td>
              <td class="answer"></td>
              <!--td class="answer"></td-->

            </tr>
            <tr>
              <td class="keyword"><div>16:00</div></td>
              <td class="answer"></td>
              <td class="option"><div class="card">Correr</div></td>
              <!--td class="answer"></td-->
            </tr>
          </table>
        </section>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>

        $(document).ready(function() {

          // Función que permite drag - drop
          function dragAndDrop(dragTarget, dropTarget) {
            
            // Función permite hacer drag
            $(dragTarget).draggable({ revert: true });

            // Enable the droppable events...
            $(dropTarget).droppable({
              drop: function(event, ui) {
                // Append the dropped item into its drop target...
                $(this).append(ui.draggable);
                // Place the drag target in the normal document flow...
                ui.draggable.css({
 ...

CSS

* {
              box-sizing:border-box;
            }
            body {
              max-width:960px;
              margin:0 auto;
            }
            .question-body {
              margin:0 0 1.5rem;
            }
            table {
              width:100%;
            }
            tr {
              display:flex;
            }
            td {
              border:1px solid #000;
              flex:1 1 120px;
            }
            td:first-child {
              display:flex;
              justify-content:center;
              flex:0 0 120px;
            }
            td:last-child {
              margin-left:20px;
            }
            td div {
              padding:10px;
            }
            th {
              border:1px solid #000;
              display:flex;
              flex:1 1 120px;
              justify-content:center;
              padding:10px;
            }
            th:first-child {
              flex:0 0 120px;
            }
            th:last-child {
              margin-left:20px;
            }
            .question-footer {
              display:flex;
              justify-content:space-between;
              margin:0 0 1.5rem;
            }
            button {
              display:flex;
              font-size:1rem;
              height:40px;
              padding:0 10px;
            }
            .reset-btn {
              display:none;
            }
            /* Override draggable defaults... */
            .ui-draggable:hover {
              background:#ffc;
              cursor:pointer;
            }
            .ui-draggable:active {
              background:#ffc;
              cursor:pointer;
            }